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Vorwort 


JavaScript, HTML und CSS 


... das sind die drei Säulen, auf denen das moderne Web ruht. Egal, welche Tech- 
nologien Sie sonst noch verwenden, an dem Erfolgs-Trio führt kein Weg vorbei. 


Der erste Band (JavaScript — Aller Anfang ist leicht) hat sich mit den Grundlagen 
der Sprache JavaScript beschäftigt. Im vorliegenden Band zeigen wir Ihnen, wie Sie 
JavaScript nutzen können um »HTML mühelos zu manipulieren«. Diese Manipula- 
tion hilft uns, Webanwendungen zu bauen, die mehr sind als bloße statische Sei- 
ten — Webanwendungen, die sich flüssig anfühlen und gut bedienbar sind, statt 
nach jedem Klick die Seite neu aufbauen zu müssen. 


Nach diesem Kurs können Sie dynamische Tooltips erzeugen, Interfaces zum Ver- 
walten von Produkten programmieren oder eigene Bildgalerien entwickeln. Uns 
würden noch viele andere Anwendungsfälle einfallen — vor allem aber wollen wir 
Ihnen Werkzeuge an die Hand geben, mit denen Sie die Anwendungsfälle umset- 
zen können, die uns gerade nicht einfallen. 


Die Kombination aus HTML und JavaScript (und natürlich auch CSS) versetzt Sie in 
die Lage, Ihre Ideen Realität werden zu lassen. Wo fertige Webbaukästen Sie nur 
einschränken, ist JavaScript ein flexibles und williges Werkzeug Ihrer Kreativität — 
nur Ihre Phantasie ist die Grenze. 


Im vorliegenden Band geht es nicht um Frameworks wie AngularJS oder React. 
Stattdessen möchten wir Ihnen zeigen, dass eben jener Browser, mit dem Sie Tag 
für Tag arbeiten, bereits alles mitbringt, was Sie für dynamische Webanwendun- 
gen im Frontend benötigen. 


Einerseits möchten wir Sie ermutigen, kleinere Probleme direkt mit den Bordmit- 
teln des Browsers zu lösen, statt gleich ein schwergewichtiges und komplexes 
Framework einzubinden. Andererseits setzen Sie vielleicht später für größere 
Anwendungen ein solches Framework ein. Dann werden Ihnen die Grundkennt- 
nisse aus diesem Kurs eine wertvolle Hilfe sein. Sie helfen Ihnen, die Arbeitsweise 
des Frameworks zu verstehen und Probleme auch dann zu lösen, wenn Sie an die 
Grenzen des Frameworks stoßen. 


Wie schon in Band 1 begonnen, setzen wir den aktuellen JavaScript-Standard ein. 
Sie sollten bereits mit den grundlegenden Spracheigenschaften von ECMAScrip- 
t2015 vertraut sein. Ansonsten lohnt es sich eventuell, nochmal den Band 1 zur 
Auffrischung durchzuarbeiten. Wir setzen das dort begonnene Prinzip fort und 





verwenden neben den aktuellen Sprachmitteln auch aktuelle Browserimplemen- 
tierungen. Wir zeigen Ihnen die aktuellen APIs und ein modernes DOM, mit dem 
das Entwickeln von Webanwendungen wieder Spaß macht. Was sich hinter dem 
geheimnisvollen Begriff »DOM« verbirgt, erfahren Sie gleich in der ersten Lektion. 
In diesem Sinne, viel Spaß beim Lesen und Coden... 


Christin & Marco 


Marco Emrieh 
Christin Marit 



























































Abb. .1 Remote Programmieren ... Remote Schreiben ... und Remote Feiern .:) 





11 








Was Sie schon immer über das 


DOM wissen wollten... 


And then there is the DOM — I'm pretty confident 
saying this: | think, it is the worst API ever invented. 


Douglas Crockford about »Upgrading the Web«* 


Vielleicht wollen Sie ja erst einmal wissen, was dieses DOM eigentlich ist, um das es 
hier geht. Also, das DOM ist kein Gebäude — es ist die Abkürzung für Document 
Object Model und der hässliche Star dieses Buches. 


Es handelt sich dabei um eine sogenannte API — ein application programming 
interface — eine Schnittstelle zur Programmierung von Anwendungen. Im Klar- 
text heißt das, eine Sammlung von Objekten, Methoden, Funktionen und Attribu- 
ten. Sie sehen bald, was das genau bedeutet. 


Der Browser stellt uns damit eine Möglichkeit zur Verfügung, mit der wir HTML- 
Seiten dynamisch verändern können. Alle Webanwendungen, die Sie kennen, mit 
denen Sie ohne ständiges Neuladen arbeiten können, wie Google-Mail, Twitter, 
Facebook usw., verwenden das DOM, um Ihnen gut bedienbare Oberflächen (dar- 
über lässt sich vermutlich streiten) bereitzustellen. JavaScript (kurz: JS) im Browser 
ist wertlos ohne die Möglichkeit, HTML zu manipulieren — und dafür benötigen 
Sie das DOM. Auch moderne Frameworks wie AngularJS oder ReactJS greifen 
»unter der Haube« auf das DOM zurück. 


Warum eigentlich der hässliche Star? Douglas Crockford (der Mann hinter JSON 
und Autor von JavaScript — the good parts) hat 2015 in seinem Vortrag Upgrading 
the Web das DOM die schlechteste API aller Zeiten geschimpft. 


Schwer zu sagen, ob das stimmt — aber als geplagte Entwickler hat uns das Rin- 
gen mit der API schon das eine oder andere graue Haar verursacht (bei Marco ist 
das ganz deutlich zu sehen). Tatsache ist: Die API ist komplex und nicht einfach zu 
verwenden. 


Die gute Nachricht ist: Das DOM ist vor allem deswegen so komplex, weil es über- 
laden ist — mit vielen, vielen Dingen, die in der Praxis kaum Verwendung finden. 





4. https://www.youtube.com/watch?v=6UTWAEJIhww 


ee 
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Deswegen greifen wir für Sie die Teile aus der API heraus, die Ihnen den größten 
Nutzen bringen. Kombiniert mit aktueller ECMAScript6-Syntax und ein paar Knif- 
fen, die wir Ihnen bald zeigen, wird aus der schlechtesten API aller Zeiten... immer 
noch keine gute API. Aber zumindest gelingt es Ihnen, Ihre Ziele zu erreichen und 
dabei Code zu produzieren, der auch langfristig lesbar und wartbar bleibt. 





1.1 DOM-Manipulation im Kontext von Webwen- 
dungen 


Wenn Sie vorhaben, größere JS-Anwendungen oder gar Single Page Applications 
zu entwickeln, ist reine DOM-Manipulation sicherlich nicht das Mittel der Wahl. 
Spezialisierte Frameworks wie AngularJS oder ReactJS sind dafür besser geeignet. 


Warum sind wir der Meinung, dass Sie dennoch zuerst DOM-Manipulation lernen 
sollten? 


Dafür gibt es eine ganze Reihen von Gründen. Zunächst einmal kann es sein, dass 
Sie gerade keine Single Page App entwickeln, sondern einfach einer klassische 
Webanwendung (z.B. einer im ROCA-StiPP) eine modernere Fassade verpassen wol- 
len. Vielleicht möchten Sie aber auch die Usability verbessern oder einfach ein 
wenig den »Fancyness«-Faktor erhöhen. Dafür ist ein wenig gezielt und nicht über- 
trieben eingesetztes DOM-Scripting oft die richtige Wahl. Sie benötigen keine 
zusätzlichen Frameworks, müssen keine riesigen Datenmengen nachladen oder 
komplizierten Setup-Code erstellen. Alles, was Sie benötigen, bringt der Browser 
mit. 


Wo wir gerade über Datenberge sprechen: Vielleicht ist es Ihnen auch wichtig, dass 
Ihre Website schnell lädt, weil Ihnen ihre mobilen Nutzer am Herzen liegen. Oder 
Sie wissen, dass Geschwindigkeit ein wichtiger Rankingfaktor für Google ist; ein 
Gesichtspunkt, den viele SEO-Experten (Search Engine Optimization, dt. Suchma- 
schinenoptimierung) immer noch sträflich vernachlässigen. In diesem Fall ist es 
besonders wichtig, dass Sie möglichst wenig zusätzlichen Code benötigen. 


Sollten Sie später mit einem umfangreicheren Webframework arbeiten, werden 
Sie feststellen, dass nicht jedes Framework alles kann oder manche »einfachen« 
Dinge in dem einen oder anderen Framework gar nicht so einfach sind — weil sie 
gerade nicht ins Frameworkkonzept passen. 


Dann ist es an der Zeit, mal wieder selbst Hand anzulegen oder zumindest zu ver- 
stehen, was das Framework »unter der Haube« so treibt. 





5.  http:/roca-style.org/ 
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Nur wer das DOM beherrscht, beherrscht den Browser. | 





1.2 Ein Leben ohne jQuery 


»Warum zur Hölle verwendet Ihr kein jQuery?« lautet der 
aus der Memesprache (sehr verbreitet in der Weben- 
wicklungsszene) übersetzte Ausdruck, den Sie in 
Abb. 1.1 finden. 


Tatsächlich hatten wir dieses Buch ursprünglich als 
JQuery-Buch begonnen. Es waren sogar schon drei Lek- 

tionen fertig. Aber sowohl eigene Projekte als auch 
ra Gespräche mit Dutzenden von Entwicklern auf Konfe- 
Meme?, erstellt mit dem . . = . RER 
ImgFlip-Memegenerator renzen haben bestätigt: Die Zeit ist reif — reiffür ein Web 
ohne jQuery. 





Verstehen Sie uns nicht falsch — wir sind keine Gegner von jQuery. jQuery ist 
eine großartige Bibliothek. Wir haben sie in vielen Projekten gerne eingesetzt. Was 
jQuery vor allem geleistet hat, war, eine stabile Plattform zu bieten, die die Unter- 
schiede zwischen den Browsern ausgleicht. jQuery hat jede noch so verrückte 
Browserbesonderheit vor uns verborgen und uns so viel Ärger und Tausende von 
Entwicklungsstunden erspart. 


jQuery brachte auch zu Zeiten von EcmaScript 3.1 bereits High-Order-Funktionen 
wie map und each mit. Vermutlich hat jQuery sogar den EcmaScript-Standard 
dazu inspiriert, ähnliche Funktionalität direkt in die Sprache zu integrieren. 





Ich kann gar nicht beschreiben, wie verrückt die Web- 
Welt war, bevor Bibliotheken wie jQuery und Prototype 
sich um Browserunterschiede kümmerten. Ich hab' oft 
nächtelang Dokumentationen gewälzt und JS-Code 
debuggt, um herauszufinden, warum gerade diese eine 
Sache, die in allen anderen Browsern tadellos funktio- 
niert, in IE5/IE6 mal wieder anders ist. 














6. https:/imgflip.com/i/r7vc2 
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Jedenfalls entwickelt sich das Web weiter. Unter der Voraussetzung, dass der Inter- 
net Explorer 9 der älteste Browser ist, den Sie noch unterstützen müssen, sind die 
Unterschiede zwischen den Browsern nicht mehr so groß. Es kommt natürlich 
auf Ihre Zielgruppe und Ihren Anwendungsfall an, aber die Notwendigkeit jQuery 
(oder vergleichbare Bibliotheken) einzusetzen, ist nicht mehr so groß wie noch vor 
wenigen Jahren. 


Mittlerweile hat sich eine ganze Community um das Thema #nojquery’ (Twitter 
Hashtag) gebildet. Hier ein paar Links zum Weiterschmökern: 


> youmightnotneedjquery.com 

> blog.garstasio.com/you-dont-need-jquery 

> www.sitepoint.com/do-you-really-need-jquery 

> lea.verou.me/2015/04/jquery-considered-harmful 

> tutorialzine.com/2014/06/10-tips-for-writing-javascript-without-jquery 


> programmers.stackexchange.com/questions/1 66273/advantages-of-using-pure- 
javascript-over-jquery 


Unter youmightnotneedjqueryplugins.com finden Sie sogar eine Liste von jQuery- 
freien Widgets und Plugins. Direkte Vergleiche zwischen jQuery und Vanilla-Code 
(erklären wir gleich) finden Sie in Ray Nicholus' Buch (2015) Beyond jQuery. 


1.3 JavaScript mit Vanille-Geschmack 


Generell ist die Idee dieses Buches, mit vanilla JS zu arbeiten, so lange es sinnvoll 
ist. Der Begriff vanilla JS bedeutet: einfaches JavaScript ohne Schnickschnack oder 
Beiwerk. Als Belohnung winken kleine Dateigrößen und hohe Performance. 


Ein weiterer Begriff mit der gleichen Bedeutung wie vanilla JS wäre übrigens naked 
JS (Nur hat uns das Lektorat leider alle darauf aufbauenden Scherze gestrichen). 


Unter vanilla-js.com finden Sie eine Satireseite von Eric Wastl, die vanilla JS wie eine 
Bibliothek oder ein Framework anpreist, das Sie sich herunterladen können — eine 
leere Datei :) 


The Vanilla JS team takes pride in the fact that it is the most lightweight framework avail- 
able anywhere; using our production-quality deployment strategy, your users' browsers 
will have Vanilla JS loaded into memory before it even requests your site. 


vanilla-js.com 





7. https://twitter.com/search?q=%23nojquery 
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Ignoriert man mal den humoristischen Aspekt, so bietet die Seite vor allem inter- 
essante Vergleiche zwischen vanilla JS und beliebten Bibliotheken — Vergleiche, 
die zeigen, dass »reines« JS nun wirklich keine schlechte Wahl ist. 


1.4 Voraussetzungen 


Wir gehen davon aus, dass Sie entweder Band 1: »JavaScript — Aller Anfang ist 
leicht« durchgearbeitet haben oder äquivalente JavaScript-Grundkenntnisse mit- 
bringen. Sollten Ihnen Konzepte wie Variablen, Kontrollstrukturen (z.B. if ), Rekur- 
sion oder High-Order-Funktionen (map, reduce, ...) nicht vertraut sein, empfeh- 
len wir Ihnen, sich erst mal mit den Grundlagen zu beschäftigen. Der Band 1 die- 
ser Reihe: JavaScript — Aller Anfang ist leicht (Emrich, Marit 2015) eignet sich dafür 
übrigens hervorragend !) 








Dieses Buch verwendet konsequent die Sprachversion ES6 bzw. EcmaScript 


2015 von JavaScript. 





Sie sollten also auch mit Basis-ES6-Features wie Stringtemplates, let, const 
oder dem fatarrow => vertraut sein. 


1.5 Was dieses Buch ist 


Dieses Buch konzentriert sich auf JavaScript im Browser. Inbesondere behandeln 
wir das Browser-DOM und zeigen Beispiele, wie sie in echten Projekten tatsächlich 
vorkommen. D.h. Sie lernen die Browser-Funktionen anhand von Code kennen, 
wie wir ihn (nahezu) auch in Wirklichkeit schreiben würden. Deswegen erwartet 
Sie kein Feuerwerk an Features, die wir im Akkord abhandeln. Stattdessen zeigen 
wir Ihnen, wie Sie die neuen Funktionen und Konzepte sinnvoll in realen Umge- 
bungen einsetzen. Dazu gehören auch oft viele Verbesserungsrunden, um schließ- 
lich Code zu präsentieren, auf den Sie stolz sein können. 


1.6 Was dieses Buch nicht(!) ist 


Wenn Sie später Software mit JS entwickeln, werden Sie oft Details nachschlagen 
müssen. Dafür ist dieses Buch aber nur sehr bedingt geeignet. Wir versuchen eher, 
Ihnen einen Leitfaden an die Hand zu geben, der Ihnen einen schnellen Einstieg 
in das Browser-DOM ermöglicht. Dabei ist die Reihenfolge der Lektionen auf den 
Lernfortschritt ausgerichtet, und nicht auf schnelles Auffinden von Themen opti- 
miert. Wir erheben auch keinen Anspruch auf Vollständigkeit, sondern beschrän- 
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ken uns bewusst auf die Dinge, die für Sie als Einsteiger zunächst am wichtigsten 
sind — das »Big Picture« sozusagen. 


Wenn Sie später bei Ihrer täglichen Entwicklungsarbeit alle Details benötigen, 
empfehlen wir Ihnen folgende Websites: 


> www.mozdev.org — Mozilla Developer Network (MDN) 
Das MDN ist viel mehr als eine Referenz für den Firefox-Browser. Sie finden hier 
sowohl ausführliche Details zum JS-Sprachkern als auch zur Browser-Funktio- 
nalität. Selbst Tabellen, welcher Browser welches Feature ab welcher Version 
implementiert, sind vorhanden — häufig mit Polyfills (Code, der das Feature 
nachrüstet) für den Fall der Fälle. 


> www.webplatform.org 
Ein gemeinsames Dokumentationsprojekt vom W3C, Microsoft, Adobe und 
anderen. Sehr gute und ausführliche Dokumentation zu HTML5 und CSS. Die 
JS-Dokumentation ist noch in Arbeit, aber schon vielversprechend. 


>» caniuse.com 
Kann ich ein bestimmtes Feature benutzen? Diese Site kennt die Antwort. Aus- 
führliche Übersichten zu neuen Features in HTML, CSS und JS mit Angaben zu 
den Browserversionen und Hinweisen zu Polyfills. 





Falls Sie nach JS-Inhalten googeln möchten, ist es rat- 
sam, ein »mdn« zu ergänzen, damit Sie gleich auf der 
passenden Seite des Mozilla Developer Networks lan- 
den — sonst besteht die Gefahr, dass Sie Seiten in der 
Trefferliste finden, deren Erklärungen veraltet oder 
schlichtweg falsch sind. 












































1.2 Warum Firefox? 


Wir setzen Mozilla-Firefox (Version 46+, englische Fassung) als Beispielbrowser für 
diesen Kurs ein. Firefox hat den Vorteil, dass er bereits alle ES6-Features unterstützt, 
die wir verwenden. 


Im Grunde spricht nichts dagegen, wenn Sie lieber einen anderen Browser ver- 
wenden möchten. Sie sollten nur sicherstellen, dass der Browser bereits über die 
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eingesetzten ES6-Features verfügt. Eine Übersicht über den Stand der 
ES6-Unterstützung finden Sie in der ES6 compatibility table®. 


1.8 Projekt »NerdWorld« 


Im ersten Band haben wir das Projekt NerdWorld mit seinem Auftraggeber Björn 
vorgestellt. NerdWorld ist ein fıktives Projekt, anhand dessen Sie viel über JS lernen 
können — vor allem auch, wo und wie Sie JS sinnvoll einsetzen. 


Auch dieses Mal hat Björn wieder jede Menge für Sie zu tun und stellt Sie vor 
interessante Herausfordungen. Herausfordungen, die Sie Dank JavaScript natür- 
lich mühelos bewältigen! 


Wenn Sie das Projekt bereits aus dem Buch Javascript - Aller Anfang ist leicht ken- 
nen, können Sie den folgenden Abschnitt überspringen. Ansonsten wiederholen 
wir hier noch mal die Projektbeschreibung. 


Ein Kundengespräch 


Stellen Sie sich vor, Ihr erster Kunde ist Björn — ein Ladenbesitzer, der seine Pro- 
dukte nun auch im Internet anbieten möchte. Der Laden heißt »NerdWorld« (das 
Beispiel ist fiktiv — Sie können sich das Googeln sparen). 


NerdWorld ist ein Online-Shop, bei dem Nerds und andere Technik-Verrückte Pro- 
dukte des »täglichen Bedarfs« kaufen: Nerfguns, Ufos mit USB-Anschluss, Klingo- 
nenwaffen fürs Büro, koffeinhaltige Getränke, stark koffeinhaltige Getränke, noch 
stärker koffeinhaltige Getränke usw. Eben alles, was der moderne Entwickler zum 
Überleben im Büro-Dschungel so braucht. 


Es gibt zwar schon eine statische HTML-Site, nur können Sie dort bisher keine Pro- 
dukte kaufen. Die neue Site soll primär aus einem Shop bestehen. Um das Ganze 
etwas interessanter zu gestalten, sind außerdem weitere Features geplant oder 
sollen weiterentwickelt werden, wie z.B. 


>» ein Chat-Client, über den sich die Kunden mit den Verkäufern/Kundenberatern 
austauschen 


> eine Newsletter-Funktion, mit der der Shop die Kunden über neue Produkte 
informiert 


> ein Newsboard, auf dem die Kunden die neuesten Neuigkeiten erfahren. 


8. http://kangax.github.io/compat-table/es6/ 
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Damit dieser Traum auch Realität wird, hat sich der Geschäftsführer an einen Spe- 
zialisten gewandt: an Sie! Sie treffen sich also mit ihm, und er schildert Ihnen die 
Situation: 











Seit Jahren verkaufen wir cooles Zeug für Nerds — oder 
solche, die es werden wollen. Unsere Produktpalette 
reicht von Star Trek-Fanartikeln über Programmierer- 
Utensilien bis hin zu smartphonegesteuerten Mini- 
Drohnen und Scherzartikeln wie dem Elektroschock- 
Kugelschreiber. 











Im Laufe dieses Kurses werden wir immer wieder auf Projekt NerdWorld zu spre- 
chen kommen und Ihnen zeigen, wie Sie die Anforderungen mit JS und dem DOM 
bewältigen. 
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2.1 »Hello DOM« mit querySelector und 
innerHTML 





Abb. 2.1 Foto: oskay? 
Lizenz: CC BY 2.0'° 


Jedes ernstzunehmende Buch über Programmierung beginnt mit einem Hello 
World-Beispiel. Natürlich wollen wir mit dieser Tradition nicht brechen. In Band 1 
haben Sie Hello World auf der Konsole ausgegeben. In diesem Buch geht es nun 
um die HTML-Struktur. Also »sagen« Sie erst einmal Hello World auf einer HTML- 
Seite. Sie benötigen dafür: 


1. eine einfache HTML-Seite (Codebeispiel 2.1) 


2. Die JavaScript-Konsole des Browsers 


N <!DOCTYPE html> 
<html lang="en"> 






<head> 
<meta charset="utf-8" /> 
<title>Hello World</title> 


<hi>Hello <em>World</em></hi> 


9. https://www-flickr.com/photos/oskay/472097903/sizes/o/in/photostream 
10.  http://creativecommons.org/licenses/by/2.0 
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‚Abb. 2.2 Hello World in Firefox 


ES: Schritt für Schritt: 


1. Öffnen Sie das HTML-Dokument aus Codebeispiel 2.1 in Firefox. Die 
Datei finden Sie im Begleitmaterial zum Buch unter 02/examples/sim- 
ple.html 


2. Öffnen Sie die Web-Konsole (ctrl-shift-K) und geben Sie folgenden Code 
in die JavaScript-Befehlszeile ein (Abb. 2.2): 


document.querySelector('h1').innerHTML = "<em>Hello</em> 
DOM" ‚ 


Sobald Sie die Zeile mit Enter bestätigen, ändert sich die Überschrift von Hello 
World nach Hello DOM — mit entsprechend geändertem Markup (siehe Abb. 2.3). 
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Be Edi Yen  Hielory Bockmarks Tools Heap 
Hello World ” > 





Aa 


se Ble:iffhkomeimemrich chwork/webmastersidms back Il > 








Hello DOM 








Bo Rs. ge. zB Be 8 #0 E x 
» 3 = 55 © Security Loggine Siesr F 
| document .queryselector| hl }.innerHTBL = "<enstellse/ens 08°; 


>| 
Abb. 2.3 Hello DOM in Firefox 


2.2 Ein Blick hinter die Kulissen 


Wie funktioniert das? 


Sehen Sie sich das Ganze nochmal in Zeitlupe an. Na gut, wir haben leider keine 
richtige Zeitlupe, aber wir können zurückspulen (mit einem Browser-Reload) und 
uns die beiden Teile der Anweisung als Einzelschritte ansehen. 


3, Laden Sie also die HTML-Seite neu (ctrl-R bzw. cmd-R), um wieder zur 
ursprünglichen Hello World-Seite zurückzukehren. 


4, Geben Sienur document.querySelector('h1') (ohne Zuweisung 
danach) ein. 


® Net e css e 35 = 


docuwent .querySelectort('hl’) 





Mit der Funktion document.querySelector können Sie HTML-Elemente inner- 
halb des HTML-Dokumentes auswählen. Der Parameter ist ein beliebiger CSS- 
Selektor. So liefert Ihnen document .querySelector('h1') das erste h1-Ele- 
ment als JS-Objekt zurück. 
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Bisher haben wir den Begriff Objekt noch nicht genauer definiert. Im Moment ist 
aber nur wichtig, dass Objekte Werte sind, wie Zahlen oder Strings. Objekte kön- 
nen auch komplexere Dinge repräsentieren, wie hier z.B. das h1 -Element. 


Im Übrigen können Sie das h1 -Element in der Konsole untersuchen. Beim Mouse- 
Over wird es im HTML-Dokument hervorgehoben. Klicken Sie das Symbol "* dane- 
ben an, zeigt der Firefox-Inspector, wo es sich im HTML-Baum befindet (siehe 
Abb. 2.4). 














































































































hrome:j/browser/content/devtools/webconsole.xul# 


> Concde ® Debugger 


‚B 









“ Net eis 35 @ Security - © Loggi 
| 4 document.queryselector('hl') Br 


odeintheinspector| 


Abb. 2.4 h1 im Firefox-Inspector 


Der Rückgabewert der Funktion document.querySelector ist also ein JS- 
Objekt, das ein Element im HTML-Baum repräsentiert. Genauer gesagt ist es ein 
sogenanntes Element-Objekt. Objekte in JS haben Eigenschaften (engl. proper- 
ties). Eine wichtige Eigenschaft, speziell von Element-Objekten, ist innerHTML. Sie 
ermitteln ihren Wert mit Hilfe der Punkt-Notation, z.B. 


document.querySelector('hl') .innerHTML 
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5. Geben Sie jetzt in die Konsole ein: 





men „querySelector(‘h1' ). innerHTML nn 





Sie erhalten als Ausgabe: 
Hello <em>World</em> 


document.querySelector('h1') liefert das Element-Objekt zurück, dessen 
Eigenschaft innerHTML Sie abfragen. Der Wert von innerHTMi, ist ein String mit 
dem inneren HTML des jeweiligen Elementes — also dem HTML-Quellcode, der 
sich innerhalb der Tags befindet. 


Die Punktnotation funktioniert auch mit anderen Objekten & Eigenschaften. Die 
Schreibweise hat dabei immer die Form: <objekt>.<Eigenschaft> 





document .querySelector (hl). innerHTML 
Denn 


Objekt Eigenschaft 


Sie können Eigenschaften ähnlich wie Variablen verwenden. Genauso wie bei 
einer Variable können Sie auch Eigenschaften neue Werte zuweisen. Sobald Sie der 
Eigenschaft innerHTML einen neuen Wert zuweisen, ändert sich die HTML-Seite. 


&. Geben Sie ein: 


document.querySelector('h1').innerHTML = "Hello again!"; 


Damit Sie uns auch glauben, dass Objekte tatsächlich einfach nur Werte sind, sind 
wir Ihnen noch einen Beweis schuldig. Hier ist er: Sie können ein Objekt, wie jeden 
anderen Wert, einfach an einen Variablennamen binden. 


7. Geben Sie ein: 
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Außerdem liefert Ihnen nun die Eingabe von myE1 in der Konsole wieder das 
HTML-Element-Objekt zurück. 











| LM nn] 
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2.3 Vom Suchen und Finden im DOM 


Sie haben gesehen, dass document.querySelector HTML-Elemente als JS- 
Objekte extrahieren kann. Tatsächlich ist das ganze HTML-Dokument nichts ande- 
res als eine Sammlung von HTML-Elementen, die in einer Baumstruktur angeord- 
net sind. Äquivalent dazu sind die passenden JS-Objekte ebenfalls in einem Baum 
angeordnet — dem sogenannten Document Object Model, kurz DOM. Für die 
einfache HTML-Seite aus Codebeispiel 2.3 sieht das DOM beispielsweise wie in 


Abb. 2.6 aus. 







<!DOCTYPE html> 
|<html lang="en"> 


‚<head> 
<meta charset="utf-8" /> 
<title>DOM-Example</title> 
<link rel="stylesheet" href="css/styles.css" 
media="screen" /> 

| </head> 


body> 


<header> 
<nav> 
<ul> 
<li></li> 
<li></li> 
<li></li> 
</ul> 
</nav> 
</header> 


<main> 
<article> 
<hl></h1> 
<p></p> 


type="text/css" 
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<img alt="" srcatg I 
</article> 
_</main> 










Codebeispiel 2.3 additional_hles/02/examples/dom_example.html 





Abb. 2.5 Visualisierung der verschachtelten HTML-Struktur 
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Abb. 2.6 Baumstruktur der HTML-Seite 


Die Funktion document .gquerySelector selektiert immer das erste Element, das 
dem übergebenen CSS-Selektor entspricht, und gibt es zurück. Der Selektor kann 
dabei ein beliebiger valider CSS-Selektor sein. Tabelle 2.1 zeigt die wichtigsten. 

















































































































































































































































































































































































































































































































Universal | * 
selector 

Type hl 
selector 


ID selec- | #some-id 
tor 





Tabelle 2.1 Basis CSS3-Selektoren 





Selektiert ein beliebiges Element. Diesen Selektor 
sollten Sie nicht ohne weitere Einschränkungen 
verwenden, da das Selektieren aller Elemente 
einer Website sehr viel Rechenzeit in Anspruch 
nehmen kann. 





Selektiert alle Elemente eines bestimmten Typs. 


Selektiert genau ein Element mit der gegebenen 
id. 
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2 Beisn Besc ® ® 
Class .some-class | Selektiert alle Elemente, denen die angegebene 
selector Klasse zugewiesen wurde. Beachten Sie, dass ein 


Element mehrere Klassen haben kann. 





- hl, p, »90 


Tabelle 2.1 Basis CSS3-Selektoren 


1%; 


Das Komma ist selbst kein Selektor, sondern 
erlaubt es, mehrere Selektoren zu kombinieren. Im 
Beispiel würden alle n1-Elemente, alle p-Elemente 
und alle Elemente mit der Klasse go selektiert. 


























































































































http://www.thinkgeek.com/product/2024/?srp=6 
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2.4 ...sie alle zu finden ... — mit querySelectorAll 








Auf unserer News-Seite haben alle Artikel eine eigene 
Überschrift. Ergänzen Sie bitte ein Aktuell: vor jeder 
dieser Überschriften. 

















<!DOCTYPE html> 


<html lang="en"> 


<head> 
<meta charset="utf-8" /> 
<title>Headlines</title> 


<link rel="stylesheet" href="../../css/styles.css" type="text/ 
css” media="screen" /> 
</head> 
<body> 


<h2>Lorem ipsum dolor sit amet.</h2> 
<h2 class="news">Quod eligendi saepe voluptates eveniet.</h2> 
<h2 class="news">Architecto reiciendis magnam modi 
inventore.</h2> 
<h2 class="news">Modi ipsum, velit rem ipsam.</h2> 
<h2 class="news">Provident, officia quisquam aliquam 
deserunt !</h2> 
</body> 





«/html> 
Codebeispiel 2.5 additional_files/02/examples/news.html 


Es gibt oft Situationen, in denen Sie mehrere Elemente gleichzeitig auslesen oder 
verändern müssen. Für diese Fälle gibt es die Funktion querySelectorAll.|m 
Gegensatz zu querySelector liefert sie, statt des ersten Treffers, alle zum Selek- 
tor passenden Elemente zurück. 


Öffnen Sie die Seite news.htmI (Codebeispiel 2.5) und geben Sie folgenden Code in 
die Konsole ein. 


document .querySelectorAll('h2') 
Sie erhalten: 


NodeList [ <h2>, <h2.news>, <h2.news>, <h2.news>, <h2.news> ] 
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Eine NodelList ist ein Objekt, das mehrere Elemente (Knoten/Nodes) in einer Liste 
zusammenfasst. Der Begriff Knoten ist dabei im Sinne des HTML-Baums gemeint. 
Ein Knoten hat immer nur ein Eltern-Element, kann aber beliebig viele (oder auch 
gar keine) Kind-Elemente haben. 


Die NodeList verhält sich ähnlich wie ein Array. Sie können mit dem Index-Operator 
darauf zugreifen. So gibt Ihnen z.B. 


document.querySelectorAll('h2')[@].innerHTML 


den Text der ersten h2 -Überschrift zurück, also im Beispiel den Text Lorem ipsum 
dolor sit amet. 


Wenn Sie wissen möchten, wie viele Knoten der Selektor gefunden hat, oder ob 
überhaupt ein Element zum Selektor passt, können Sie, wie bei einem Array, die 
Eigenschaft length abfragen: 


document.querySelectorAll('h2').length // => 5 


document. querySelectorAll( 'img').length === ® // => true, means no 
images found 


Um nun Björns Anforderung zu erfüllen, genügt es natürlich nicht, die Überschrif- 
ten nur zu selektieren. Sie müssen die Überschriften ändern, oder besser gesagt, 
den Text innerhalb der Überschriften-Tags. 


Dazu müssen Sie die Überschriften aus der NodeList mit einem forBach durch- 
laufen. £orkBach ist aber nur für Arrays definiert — nicht für NodeLists. Zum Glück 
lässt sich eine NodeList mittels Array. from in ein Array konvertieren. 


© 








© const headings = Array. from(document.querySelectorAll('h2')); 
"Jheadings. forEach(h => console.log(h.innerHTML)); 





Es handelt sich hier übrigens um einen mehrzeiligen Code, den Sie sicherlich spei- 
chern möchten: Daher ist es besser, wenn Sie ab jetzt Scratchpad (shift-f4) statt 
der Konsole verwenden. 


EEE 
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eadings = Array. fromtdocument .auerySeleacteratil'n2’)}; 
s.torkach(h => console. logfh.innerkth} | 








Statt die Überschriften nur auszugeben, sollten Sie diese nun ändern. 


const headings = Array. from(document.querySelectorAll('h2')); 
headings. forEach(h => h.innerHTML = "Aktuell: ' + h.innerHTML); 





Aktuell: Lorem ipsum dolor sit amet. 

Aktuell: Quod eligendi saepe voluptates eveniet. 
Aktuell: Architecto reiciendis magnam modi inventore. 
Aktuell: Modi ipsum, velit rem ipsam. 

Aktuell: Provident, officia quisquam aliquam deserunt! 
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Home 


Willkommen! Comacı 

Schon, dass Sie den Weg zu uns gefunden haben. Wir sind erfreut Sie und ihre Liebsten Real estate agency 

in nächster Zeit betreuen zu dürfen. Main Street 123 

Einen sinnvollen Text für eine fiktve Seite zu schreiben. nur um diesen zu end 

Übungszwecken gegen Blindtext austauschen zu lassen, ist nicht so einfach tel +49 0) 123 - 234556 
7 


Trotzdem bin ich natürlich extrem beruht und die fiktiven Immobilienmakler sind es Hi: 5 
auf jeden Fall ebenfalls! Ans za = 1003 







































































12. https//baconipsum.com 
13.  http://veggieipsum.com 
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2.4.1 Attribut-Selektoren 


Die letzte Übung war eine nette Fingerübung, aber es gibt noch viel mehr CSS- 
Selektoren — diese sind natürlich, wie alle CSS-Selektoren, auch in JS verwendbar. 


Die nächsten CSS-Selektoren, die Sie sich anschauen sollten, sind die sogenannten 
attribute selectors. Mit ihrer Hilfe können Sie auf Elemente mit bestimmten Attri- 
buten und Werten zugreifen. Tabelle 2.2 zeigt eine Übersicht. 
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[srec] Selektiert Elemente mit dem angege- 
benen Attribut. Der Attributwert 
spielt dabei keine Rolle (attribute 
presence). 

















[attr=val] [src="funny_cat.png'] | Selektiert Elemente, die das angege- 
bene Attribut (src) mit genau dem 
angegebenen Wert (funny_cat.png) 


enthalten (exact attribute match). 



















[attr*=val]l | [src#=cat] Selektiert Elemente, bei denen das 
angegebene Attribut (src) den Wert 
(cat) als Teilstring enthält (substring 


attribute match). 












[attr\=val] | Isrc”=funny] Selektiert Elemente, bei denen das 
angegebene Attribut (src) mit dem 


Wert (funny) beginnt. 


[attr$=vall | [srcs=png] Selektiert Elemente, bei denen das 
angegebene Attribut (src) auf den 
angegebenen Wert (png) endet. 




















Tabelle 2.2 CSS attribute selectors. Allexamples select <img src="funny_cat.png".../> 
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2.4.2 Combinator Selectors 


Als Nächstes werfen wir einen Blick auf die combinator selectors. Sie erlauben 
Ihnen, Elemente anhand ihrer Beziehung zu anderen Elementen zu finden. Das 
einfache Leerzeichen, das Sie vermutlich schon kennen, ist ein solcher combinator. 
Sie können damit die Nachfahren eines angegebenen Elementes selektieren. In 
Tabelle 2.3 finden Sie weitere combinator selectors. 


<!DOCTYPE html> 
<html lang="en"> 


<head> 
<meta charset="utf-8" /> 
<title>Selector Testing<s/title> 
</head> 


<body> 
<ul id="ull"> 
<li id="1111"><span>11</span></li> 
<lj id=Ll112">]2</1j> 
<iı ig oj3fj > 
<li id="1114">14</li> 
</ul> 
<ul id="ul2'> 
<li id="1121"><span>21</span></li> 
<li id="1i22"><strong><span>22</span></strong></li> 
<li id="L123'>23</li> 
</ul> 
</body> 


</html> 


Codebeispiel 2.6 additional_files/02/examples/selector_testing.html 





En SE ee ee ee 
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Descendant 
combinator 
(Leerzeichen) 





li span 





Selektiert Elemente (hier span), die die Nachfah- 
ren eines anderen angegebenen Elements (hier 
1i) sind — völlig unabhängig davon, wie viele 
Ebenen dazwischen liegen. 

Ergebnis: [<span>11</span>, 








Child combi- 
nator (>) 








<span>21</span>, <span>22</span>] 
Adjacent | ti#li1l | Mit diesem Selektor können Sie das Element aus- 
siblingcom- | + wählen, das im HTML-Quelltext direkt nach dem 
binator (+) angegeben Element (hier 11#1i11) auf der glei- 

chen Ebene (Geschwister-Element) folgt. Falls das 

im Dokument nachfolgende Element nicht dem 

hinter dem +-Symbol angegebenen entspricht, 

wird nichts selektiert. 

Ergebnis: [<1i id="1i12">12</li>] 
General ti#lil2 | Mit diesem Selektor können Sie alle Elemente aus- 
sibling com- | “ Li wählen, die im Dokument nach dem angegebe- 
binator (-) nen Element (hier 11#1i12) auf der gleichen 





li > 
span 





Ebene (Geschwister-Element) folgen. Es wird nicht 
nur das direkt folgende Element gewählt, wie 
beim Next sibling combinator. 

Ergebnis: [<1i id="1i13">13</li>, <li 
id="1i14">14</1li>] 


Eine Variante der Nachfahren-Selektoren sind die 
Kind-Selektoren, mit denen Sie Elemente auswäh- 
len können, die direkte »Kinder« von übergeord- 
neten Eltern-Elementen sind. 

Im Beispiel werden nur span-Elemente selektiert, 
die sich direkt innerhalb eines 1i-Elements befin- 
den. <span>22</span> befindet sich in einem 
strong-Element und wird deswegen nicht selek- 
tiert. 

Ergebnis: [<span>11</span>, 
<span>21</span>] 





Tabelle 2.3 Combinator Selectors — Ergebnisse basieren auf Codebeispiel 2.6 


Wie Sie sehen, sind CSS-Selektoren praktisch und einfach zu verwenden. Vermut- 
lich kennen Sie die meisten davon schon längst. Es sollte also nicht schwer sein, 
sich ein paar weitere zu merken. 
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2.4.3 Pseudo Classes 


Die sogenannten pseudo classes erlauben eine weitere Spezialisierung der Selekto- 


































































































































































































































































































































































































































































































ren. 

first-child ul lisfirst- 
child 

ınth-child(x) ul li:nth- 
child(5) 

ılast-child ul li:last- 
child 

:only-child #article 
p:only- 
child 


Tabelle 2.4 Pseudo Classes 











































































































































































































































































































Mit dieser Pseudo-Klasse sprechen Sie das erste 
Kind-Element eines übergeordneten Containers 
(hier: ul) an, falls es sich um ein Element vom 
angegeben Tag-Typ (hier: 1i) handelt. 

Sollte das erste Kindelement nicht den richtigen 
Tag-Typ haben, wird nichts selektiert. 


Die Pseudo-Klasse spricht das x-te Kind-Element 
an — im Beispiel das fünfte Element innerhalb 
von ul, falls es vom Tag-Typ 1i ist. 


Äquivalent zu :first-child selektieren Sie hier 
das letzte Kind-Element, sofern es vom richtigen 
Tag-Typ ist. 


Diese Klasse selektiert ein Element nur, wenn es 
sich um das einzige Kind eines angegebenen 
Eltern-Elementes handelt. 
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‚empty div:empty | Mit dieser Pseudo-Klasse sprechen Sie nur Ele- 
mente an, die ohne Kind-Elemente sind. Inhalt in 
Form von Text wird dabei ebenfalls als Kind-Ele- 
ment betrachtet. 





in 
:not(selector) | :not(span) | Negation. Wählt Elemente aus, wenn sie nicht 
dem in Klammern angegebenen Selektor ent- 
sprechen. Im Beispiel würde alles außer span-Ele- 
menten ausgewählt. 

















Tabelle 2.4 Pseudo Classes 


Die vorgestellten Selektoren sind natürlich längst nicht alle, aber damit kommen 
Sie in der Praxis schon recht weit. Fall es nötig sein sollte, finden Sie weitere Selek- 
toren in der offiziellen W3C-specification'* oder in einer Online-Dokumentation wie 
MDN® oder Webplatform"®. 


2.5 Document vs. Element 


Die Methoden querySelector und querySelectorAll lassen sich auf 
document global und auf einzelnen Elementen lokal verwenden. Global heißt, 
der Selektor durchsucht das gesamte Dokument. Lokal bedeutet, dass nur die Kin- 
der des entsprechenden Element-Knotens zu Suche herangezogen werden. 


Beispiel 


HTML-Dokument: 


<body> 
<ul> 
<li>1</li> 
<li>2</li> 
</ul> 
<ul id="second_ list"> 





14. http://www.w3.org/TR/css3-selectors/#attribute-selectors 
15. https://developer.mozilla.org/en-US/docs/Web/CSS/Reference 
16. http://docs.webplatform.org/wiki/css/selectors 
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<|i>3</li> 

<li>4</li> 
</ul> 
</body> 


JavaScript in der Konsole: 


document.querySelectorAll('li') 

/1 => =li>1</li><li>2</ li><li>3</li><li>4</li> 
$('#second_list').querySelectorAll('li') 

Il => <li>3</li><li>4</li> 


Codebeispiel 2.7 // => zeigt den Rückgabewert 


2.6 Kurz und bündig — $ 


Viele Bibliotheken und Frameworks aus dem JS-Umfeld, wie z.B. jQuery'’ und Pro- 
totype'®, bringen eine Funktion namens $ mit. Diese Funktion entspricht mehr 
oder weniger document ..querySelector bzw. 
document.querySelectorAll — mit kleinen Unterschieden je nach Imple- 
mentierung. Da Sie document .querySelectoräAll in der Praxis sehr häufig ver- 
wenden, wäre die kürzere Schreibweise $ extrem nützlich. Ein einzelnes Zeichen 
ist nicht nur schneller zu tippen, sondern verbessert auch die Lesbarkeit, vor allem 
bei langen Code-Zeilen. 


Um von der kürzeren Schreibweise zu profitieren, müssen Sie sich aber nicht erst 
eine komplette Bibliothek oder ein großes Framework in Ihr Projekt reinholen. Sie 
erreichen den gleichen Effekt mit einer simplen Umbenennung. Binden Sie die 
Funktionen document.querySelector und document.querySelectorAll 
einfach an die beiden Bezeichner $ und $$: 


document.querySelector.bind(document); 
document.querySelectorAll.bind(document); 





Das .bind (document) ist leider notwendig. Das liegt an einer kleinen Unschön- 
heit der Sprache, auf die wir an dieser Stelle nicht näher eingehen möchten. 


Fügen Sie diese beiden Zeilen in Ihren Code ein, stehen Ihnen $ und $$ als Kurz- 
schreibweisen zur Verfügung. 





17.  https://jquery.com 
18. http://prototypejs.org/ 
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Übrigens bringen die Konsolen von Firefox und Chrome die Funktionen 5 und $$ 
bereits mit — leider wirklich nur für die Konsole. Aber auch das ist oft bereits sehr 
praktisch. 
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2.7 Zusammenfassung 














gibt das erste Element zurück, | Element 
das zum angegebenen Selek- 
tor passt. Durchsucht nur Ele- 
mente innerhalb des HTML- 
Teilbaums, auf dessen Wurzel- 
element querySelector auf- 


gerufen wurde. 


querySelector 











querySelectorAll gibt alle Elemente zurück, die Element 
zum angegeben Selektor pas- 
sen. Durchsucht nur Elemente 
innerhalb des HTML-Teilbaums, 
auf dessen Wurzelelement 


querySelectorAll aufgeru- 








fen wurde. 
document.querySelector gibt das erste Element zurück, | Document 
(aka $) das zum angegeben Selektor 


passt. Durchsucht das gesamte 
HTML-Dokument. 
document.querySelectorAll | gibt alle Elemente zurück, die Document 
(aka 5$) zum angegeben Selektor pas- 
sen. Durchsucht das gesamte 
HTML-Dokument. 





document.body gibt das body-Element zurück. | Document 











Tabelle 2.5 Diese Tabelle zeigt die wichtigsten Möglichkeiten zur Selektion von DOM-Elementen. Weitere 
finden Sie im MDN bei den Beschreibungen der entsprechenden APIs: Element!° & Document?", 





19.  https://developer.mozilla.org/en-US/docs/Web/API/Element 
20. https://developer.mozilla.org/en-US/docs/Web/API/Document 
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Jetzt gehts ans CSS 








Unser Chat-Room erfreut sich gerade großer Beliebt- 
heit. Wenn allerdings gerade mal wieder sehr viele Kun- 
den online sind, kann die Liste recht unübersichtlich 
werden. Deswegen wünschen sich einige Anwender die 
Möglichkeit, direkt nach ihren Freunden zu suchen. 
Dazu möchten sie den gesuchten Namen in einem 
Suchfeld eingeben. Dann sollen alle Fundstellen in der 
Liste hervorgehoben werden. 














Wow — das ist keine einfache Aufgabe, was Björn da von Ihnen verlangt. Aber 
jedes Problem wird überschaubar, wenn Sie es in Einzelteile zerlegen. 


3.1 Listige Informationen mit classList & DOMTo- 
kenList 


“<ul id="chat_members"> 

<li class="admin">Heribert</li> 
<li>Friedlinde</li> 
<li>Tusnelda</li> 
<li>Berthold</li> 
<li>0Oswine</li> 
<li>»Ladislaus</li> 

 </ul> 












Codebeispiel 3.1 Ausschnitt aus additional_files/03/examples/chatteilnehmer.html 


Ermitteln Sie zunächst die 1i -Elemente mit den Teilnehmernamen. 


$$('#chat_members li') // => NodeList [ <li.admin>, <li>, <li>, 
<li>, <li>, <li> ] 


Wie Sie sehen, ist der erste Chat-Teilnehmer, Heribert, zusätzlich mit der Klasse 
admin gekennzeichnet. 


Um nun einfach mal Heribert als highlighted zu kennzeichnen, greifen Sie ihn 
gezielt aus der NodeList heraus: 


$$('#chat_members li')[®] // => <li class="admin"> 
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Jedes Nodeobject hat neben der Eigenschaft innerHTML auch eine Eigenschaft 
namens classList, die die CSS-Klassen des Objekts repräsentiert. Fragen Sie 
diese Eigenschaft für das erste Element (d.h. Index 0) ab: 


1 


$$('#chat_members li')[@].classList // => DOMTokenList [ "admin" ] 


Sie erhalten eine sogenannte DOMTokenList zurück, die nur die Klasse admin ent- 
hält. Das ist wenig verwunderlich: Heribert ist einer der Administratoren des Chats 
— dementsprechend hat sein 1i -Element die Klasse admin. 


Eine DOMTokenList verhält sich dabei ähnlich wie ein Array. Sie können z.B. die 
Eigenschaft length verwenden, um die Anzahl der CSS-Klassen zu ermitteln: 


$$('#chat_members li')[@].classList.length // => 1 
Friedlinde hat überhaupt keine Klasse: 
$$('#chat_members li')[1].classList.length // => 0 


Mit dem Indexoperator 1] können Sie sich die erste Klasse als String herauszie- 
hen: 


$$('#chat_members li')[1].classList[@] // = 'admin' 


3.2 classList hat Methode(n) 


Einen Unterschied zwischen DOMTokenList und Array stellen jedoch die dazuge- 
hörigen Funktionen dar. Es gibt kein push, pop, sort USW. Das liegt vor allem 
daran, dass die Reihenfolge der CSS-Klassen keine Rolle spielt. Statt dessen gibt es 
die Funktionen add, remove, toggle und contains. 


3.2.1 Mehr Klasse mit add 
Fügen Sie mal spaßeshalber Heribert die Klasse hightlighted hinzu: 


El $$('#chat_members 1i') [0].classList.add('highlighted'); 





EEE 
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Abb. 3.1 Chat: »Heribert« hervorgehoben 


Wie Sie in Abb. 3.1 sehen können, ist Heribert nun hervorgehoben. Außerdem 
beinhaltet die classList zwei Elemente: 





$$('#chat_members 1i')[@l.classList. length // => 2 


Wenn Sie Heribert nun im Firefox-Inspector betrachten, sehen Sie, dass das 1i - 
Element über beide Klassen (admin und highlighted) verfügt. 


Einen weiteren Unterschied erkennen Sie, wenn Sie eine bereits vorhandene 
Klasse ein weiteres Mal hinzufügen: 






 $$('#chat_members li')[®].classList.add("highlighted'); 
$$('#chat_members li')[@].classList.length // => 2 


Die DOMTokenlist hat immer noch nur zwei Elemente. In einer DOMTokenList kann 
im Gegensatz zu einem Array der gleiche Wert nicht mehrfach vorkommen. 





46 3 Jetzt geht's ans CSS 





® 
>. 
eb) 

meh 














Friedlinde | 
Tusnelda | 
Berthold | 


| Oswine | 
| 

| Ladislaus 
i 

| 





| Ladislaus: Anybody there? 


















£3 Debugger { 3} Style Editor & Performance = Network 





IR: £ Inspector 
“ Net 8 85 = 5 eseculiy Siogging © Server Clear 
» $$('#chat_menbers 1i')[0].classtist.add( "highlighted‘); 





*«  unde 


} 


2» s$('#chat_members li')[@].classList.add{ 'highlighted’); 


« undefined 
» $$('#chat_members li')[e].classtist. length 
“8 











Venen 








Einen weiteren Unterschied erkennen Sie, wenn Sie eine bereits vorhandene 
Klasse ein weiteres Mal hinzufügen: 


3.2.2 Was zuviel ist, ist zuviel — mit remove 


Wenn Sie eine Klasse lieber wieder loswerden möchten, können Sie dazu remove 
verwenden. 


$$('#chat_members li')[@].classList.remove('highlighted'); 
$$('#chat_members 1i')[®].classList. length // => 1 





3.2.3 Wechselspiel mit toggle 


Die Funktion toggle schaltet sogar zwischen Hinzufügen und Entfernen hin und 
her. Geben Sie folgenden Code mindestens zweimal ein, um den Effekt zu beob- 
achten: 
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Einen weiteren Unterschied erkennen Sie, wenn Sie eine bereits vorhandene 
Klasse ein weiteres Mal hinzufügen: 
3.2.2 Was zuviel ist, ist zuviel — mit remove 


Wenn Sie eine Klasse lieber wieder loswerden möchten, können Sie dazu remove 
verwenden. 





$$('#chat_members li')[@].classList.remove('highlighted'); 
$$('#chat_members li')[®].classList. length // => 1 


3.2.3 Wechselspiel mit toggle 


Die Funktion toggle schaltet sogar zwischen Hinzufügen und Entfernen hin und 
her. Geben Sie folgenden Code mindestens zweimal ein, um den Effekt zu beob- 
achten: 
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$$('#chat_members 1i')[@].classList.toggle('highlighted'); 


3.2.4 Are you there? — mit contains 
Zu guter Letzt können Sie noch prüfen, ob eine bestimmte Klasse vorhanden ist: 


$('#chat_members 1i')[®].classList.contains("admin'); // => true 
$('#chat_members 1i')[@].classList.contains('i_am_not_here'); // 
=> false 





3,3 Nur highlighten, was man highlighten will — 
mit filter 


Nun wissen Sie, wie Sie einen Teilnehmer hervorheben können. Sie müssen nur 
noch herausfinden, welche Teilnehmer Sie hervorheben müssen. Tatsächlich müs- 
sen Sie aus der Menge aller Teilnehmer erst einmal die herausfiltern, die dem ein- 
gegebenen Suchstring entsprechen. Die Funktion filter könnte Ihnen hier wei- 
terhelfen. Genau wie forEach istauch filter nur für Arrays definiert — nicht 
für NodelLists. Verwenden Sie wieder Array. from, um die NodeList in ein Array 
zu konvertieren. 


const liNodes = Array. from($$('#chat_members li')); 


l1iNodes Ist nun ein Array, das die 1i -Knoten enthält. Filtern Sie die Knoten her- 
aus, deren Inhalt (inner#TML) den gesuchten String (z.B. ert) enthält. 






onst $ = document.querySelector.bind(document); 
 const $$ = document.querySelectorAll.bind(document); 
const searchFor = 'ert'; 

const liNodes = Array. from($$('#chat_members li')); 





= const liNodesFound = liNodes.filter(liNode => 


liNode. innerHTML. includes (searchFor)); 





Zuletzt fügen Sie jedem gefundenen Teilnehmer noch die Klasse highlighted 
hinzu: 





onst $ = document.querySelector.bind(document); 
‘const $$ = document.querySelectorAll.bind(document); 
 const searchFor = 'ert'; 
onst liNodes = Array. from($$('#chat_members li')); 
 const liNodesFound = liNodes. filter(liNode => 
 liNode.innerHTML.includes(searchFor)); 
liNodesFound. forEach(li => li.classList.add('highlighted')); 





Codebeispiel 3.2 Highlighten von Mitgliedsnamen, die den String 'ert' enthalten 
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Friedlinde. 
Tusnelda | 














Berinoo 


Öswine 


1 


Ladislaus. 





3.4 Methoden??? 


Fall Sie es nicht bemerkt haben, wir hatten gemeinerweise den Begriff Methode 
schon eingeschmuggelt, ohne zu erklären, was Methoden eigentlich sind. Wir ent- 
schuldigen uns und werden es nun nachholen. 


Methoden sind eine spezielle Art von Funktionen. Sie unterscheiden sich von 
anderen Funktionen dadurch, dass Sie zu einem Objekt gehören. Sie erkennen 
sie daran, dass dem Funktionsnamen beim Aufruf ein Punkt vorangestellt ist: Bei- 
spielsweise bezieht sich die Methode add in 
li.classList.add("highlighted") auf die vorhergehende classList. 
Das add fügt die Klasse auch nicht zu irgendeiner classList hinzu, sondern 
zu der des entsprechenden 1i -Elements. Insofern können Sie sich das Objekt vor 
dem Punkt vorstellen wie ein weiteres Argument, das in die Funktion eingeht. 


3.5 Zusammenfassung 















































add $("#bar").classList.add("foo") fügt eine Klasse hinzu. 
Im Beispiel erhält das Element 
mit der ia bar die Klasse foo. 





remove $("#bar").classList.remove("foo") | entfernt eine Klasse. 

Enfernt im Beispiel die Klasse 
foo von Element mit der id 
bar. 











Tabelle 3.1 Methoden des classList-Interfaces. Ein ausführliche Referenz finden Sie im MDN?' 





21. https://developer.mozilla.org/en/docs/Web/API/Element/classList 
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$("#bar").classList.item(2) gibt eine Klasse aus der 
classList anhand des über- 
gebenen Index-Arguments 
zurück. 

Gibt im Beispiel den dritten 
Klassennamen des Elements 


mit der ia bar zurück. 





toggle $("#bar").classList.toggle("foo") entfernt oder fügt eine Klasse 
hinzu. 

Im Beispiel wird die Klasse foo 
hinzugefügt, falls das Element 
mit der id bar noch nicht über 
diese Klasse verfügt. Falls die 
Klasse schon vorhanden ist, 


wird sie entfernt. 











contains | $("#bar").classList.contains("foo") | gibt true zurück, falls die 
angegebene Klasse in der 


classList vorhanden ist. 














Tabelle 3.1 Methoden des classList-Interfaces. Ein ausführliche Referenz finden Sie im MDN 
Beispiel zur classList 
HTML-Struktur (vorher): 
<body><p id="bar" class="foo"><p></body> 
JavaScript in der Kosole: 


$("#bar").classList.contains("foo") //true 
$("#bar").classList.item(®) // => "foo" 
$("#bar").classList.remove("foo") 
$("#bar").classList.add("xyz") 


HTML-Struktur (nachher): 


<body><p id="bar" class="xyz"><p></body> 
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3.6 Übungen 
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Die Heimtücke der scheinbar unscheinbaren Fehler 


Jeder, der schon mal stundenlang verzweifelt einen 
Fehler gesucht hat, nur um dann festzustellen, dass es 
sich um einen Syntax-, Tipp,- oder Flüchtigkeitsfehler 
handelte, weiß, wie ärgerlich das ist. Meine daraus resul- 
tierende Erkenntnis, kuriose Fehler betreffend: Sie kön- 
nen ÜBERALL sein! ... Naja, vielleicht nicht überall, aber 
doch an unvermuteten Stellen, und gerade dann führen 
sie nicht selten zu den merkwürdigsten und unlogischs- 
ten Problemen. 


Also: Egal ob Sie gerade »nur« HTML & CSS, JS oder 
sonstigen Code schreiben: sorgfältiges und achtsames 
Arbeiten zahlt sich immer aus. 
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Und nun: ab ins HTML 





Auf der Konsole alle Befehle einzeln einzugeben, wird langsam aber sicher etwas 
mühsam. Deswegen sollten Sie den Code aus der letzten Lektion nun in einer 
JavaScript-Datei ablegen. 


Es 











Schritt für Schritt: 


























1. Öffnen Sie einen Editor Ihrer Wahl, z.B. Scratchpad. 


2. Legen Sie eine neue Datei an, falls nötig. Kopieren Sie den Code aus 
Codebeispiel 3.2 in diese Datei und speichern Sie sie unter dem Namen 
highlight_chat_members.js 


3. Binden Sie die JS-Datei in der HTML-Datei additional_files/03/examples/ 
chatteilnehmer.html ein: 


 <head> 





<script - 
src="highlight_chat_members.js" 
defer="defer"></script> 

. </head> _ 


Sobald Sie die HTML-Datei im Browser öffnen, hebt Ihr JS-Code beim Laden der 
Seite die passenden Mitglieder hervor. 


4. Ändern Sie nun den String searchFor von 'ert' in 'a'. 


5. Führen Sie einen Browser-Reload (ctrl-R bzw. cmd-R) durch. 


Das Script hebt nun andere passende Mitglieder hervor — die, deren Namen 'a' 
enthalten. 


6. Ändern Sie den String searchFor von 'a' wieder in den ursprünglichen 
Wert 'ert' zurück und führen Sie erneut einen Reload durch. 
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4.1 Rauszögern, ohne abzuwarten: Defer & Async 


Vielleicht ist Ihnen aufgefallen, dass das script -Element zusätzlich mit dem Attri- 
but defer="defer" ausgestattet ist. Wofür ist das gut? 


Lassen Sie mal versuchsweise das Attribut weg. Sie sehen dann, dass das Hervor- 
heben nicht mehr funktioniert. Die Ursache ist ein Timing-Problem. Damit das Her- 
vorheben funktioniert, müssen die entsprechenden DOM-Elemente (also hier die 
Chatmitglieder) bereits vorhanden sein, wenn der JS-Code darauf zugreift. Zu dem 
Zeitpunkt, an dem der Browser das Script lädt (im head), sind die Elemente aber 
noch nicht da. Der Browser findet sie erst später — unten im body. 


Das Problem ist leicht zu lösen, indem Sie das script -Element mit dem defer- 
Attribut ausstatten. defer verzögert die Ausführung des Scriptes. Erst, wenn die 
Seite ihr DOM komplett aufgebaut hat, führt sie das Script aus. 


Ein weiterer Vorteil von defer besteht darin, dass der Browser das Script parallel 
zum weiteren Parsen der HTML-Seite lädt. Dadurch muss der HTML-Aufbau nicht 
auf das Laden und Ausführen der JavaScript-Datei warten. Das HTML wird schnel- 
ler angezeigt. 


Ein verwandtes Attribut ist async. Es sorgt genauso wie defer dafür, dass der 
Browser die JS-Datei parallel zu anderen Dateien lädt und das Ausführen des 
HTML-Codes an dieser Stelle nicht warten muss. Im Gegensatz zu defer führt der 
Browser die JS-Datei jedoch sofort aus, sobald sie geladen ist. Es gibt keine Garan- 
tie, dass das DOM bereits aufgebaut ist. Außerdem entspricht die Lade- und Aus- 
führungsreihenfolge der JS-Dateien nicht unbedingt der Reihenfolge der script- 
Tags im HTML-Quellcode (sogenannte Source-Order). Jedes Script startet sobald 
es geladen ist — d.h. kleinere Scripte starten meistens vor großen. 
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Also früher, da mussten wirnoch..« 


Bevor Browser da de Asnbu »korrekt« unterstütz- 
’ ten, waren Entwickler auf Tricks angewiesen. Korrekt 
_ bedeutet hier, dass der IE vor Version 11 das Attribut 
zwar unterstützte, aber die Verarbeitungsreihenfolge 
der Scripte nicht garantiert war. Chrome und Firefox 
unterstützen das Attribut schon sehr lange spezifikati- 
_ onskonform (Firefox 3.5 & Chrome 8). 











Einer dieser Tricks war es beispielsweise, die Scripte 
nicht i im head zu platzieren, sondern im body — direkt 
vor dem schließenden body-Tag. | 


Alle dee Tricks hatten ihre spezifischen Nachteile und/ 


| oder waren mit Zusatzaufwand verbunden. 


4.2 Strikt und abgeschottet: Blocks & use strict 





Nun sollten Sie innerhalb der JS-Datei noch zwei Dinge ergänzen. Zum einen ist 
es sinnvoll, ein "use strict"; zu ergänzen, um von der strikteren Syntaxprü- 
fung der JS-Engine zu profitieren — zum anderen sollten Sie den Code komplett in 
einen Block, d.h. in geschweifte Klammern {} packen. 





use strict"; 


// your code here 


Ein Block errichtet einen Scope, einen Lebensraum für Variablen. Alle Variablen 
(1et) oder Konstanten (const), die Sie innerhalb des Blocks anlegen, sind nicht 
global und können somit nicht mit anderen Bezeichnern in Konflikt treten. Sie wis- 
sen nie, ob später noch andere JS-Dateien eingebunden werden, die vielleicht die 
gleichen Variablennamen verwenden. 
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»Also früher, da mussten wir noch...« 


Früher haben wir eine sogenannte HFE verwendet, um 
zu verhindern, dass sich globale Bezeichner überall aus- 
breiten. Variablen, die wir mittels var angelegt hatten, 
hatten keinen Block-Scope, wie moderne Variablen 
(let) oder Konstanten (const). 





Da sich alte Variablen von einem Block nicht begrenzen 
ließen, musste etwas anderes her. Variablen mit var 
haben Function-Scope — entsprechend lassen Sie sich 
mit einer Funktion einfangen. 


Genau darin besteht der Trick. Wir haben anonyme 
Funktionen angelegt und diese sofort wieder ausge- 
führt — nicht, weil wir wirklich eine Funktion gebraucht 
hätten, sondern nur, um den Gültigkeitsbereich der 
Variablen einzuschränken: 


(function() { 
»..„ Your code here ... 


)0); 





IIFE steht für Immediatly Invoked Function Expression — 


ein Funktionsausdruck, der sofort ausgeführt wird. 


4.3 Nur ein kleines bisschen Refactoring... 





Hier ist nochmal die komplette Datei zu den vorherigen Beispielen: 


"use strict"; 


{ 





const searchFor = "ert"; 
const liNodes = Array. from($$("#chat_members 1i")); 
const liNodesFound = liNodes. filter(liNode => 
liNode. innerHTML. includes (searchFor)); 
liNodesFound. forEach(li => li.classList.add("highlighted")); 


const $ = document. querySelector.bind(document); 
const $$ = document.querySelectorAll.bind(document); 





Codebeispiel 4.1 additional_hles/04/examples/highlight_chat_members.js 
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Da der Code nun in einer Datei liegt, und Sie ihn nicht mehr direkt in die Konsole 
tippen, wird die Les- und Wartbarkeit des Codes immer wichtiger. Der Code aus 
Codebeispiel 4.1 ist nicht gerade ein Musterbeispiel für Clean Code (sauberen, les- 
baren Code). Mit ein paar Handgriffen können Sie ihn aber in Form bringen. Das 
Verbessern von Code —ohne dabei das Verhalten zu ändern — heißt übrigens 
Refactoring (Opdyke, Johnson 1990). Es gibt reichlich Literatur zu diesem Thema 
— z.B. das bekannte Buch Refactoring von Martin Fowler (1999). 


Der Fokus des Buchs, das Sie gerade in den Händen halten, liegt allerdings nicht 
auf dem Thema Refactoring. Deswegen möchten wir an dieser Stelle nicht zu sehr 
abschweifen und sämtliche Refactoring-Techniken erläutern. Andererseits haben 
wir aber den Anspruch, dass Sie lernen, Code zu schreiben, auf den Sie stolz sein 
können. Deswegen möchten wir Ihnen zumindest an diesem kleinen Beispiel zur 
Illustration ein paar Verbesserungen zeigen. Den Code aus Codebeispiel 4.1 kön- 
nen wir so wirklich nicht stehen lassen — sonst zeigen Sie ihn all Ihren Bekannten 
(oder dem JS-Profi von nebenan) und unser Ruf ist endgültig im Eimer. 


Also — was können Sie tun, um den Code zu verbessern? 


Extract Method 


Erst einmal sollte der Code nicht einfach so dastehen. Packen Sie ihn in eine eigene 
Funktion. Als Funktionsbezeichner bietet sich nighlightChatMembers an: 


& 


use strict"; 

const highlightChatMembers = () => { 
const searchFor = "ert"; 
const liNodes = Array. from($$("#chat_members li")); 
const liNodesFound = liNodes.filter(liNode => 


liNode. innerHTML.includes(searchFor)); 


liNodesFound. forEach(li => li.classList.add("highlighted")); 
}; 


const $ = document.querySelector.bind(document); 
const $$ = document.querySelectorAll.bind(document); 


highlightChatMembers(); 





Codebeispiel 4.2 additional_fles/04/examples/highlight_chat_members_refl.js 


Statt den gesuchten String in einer Konstante zu hinterlegen, sollten Sie einen 
Parameter verwenden. Der gesuchte String kommt später vom Anwender! Als 
Parametername ist partOfMemberName im aktuellen Kontext etwas genauer und 
verständlicher als searchFor. 
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"use strict"; 


{ 
const highlightChatMembersBy = partOfMemberName => { 
const liNodes = Array. from($$("#chat_members 1i")); 
const liNodesFound = liNodes. filter(liNode => 
liNode.innerHTML. includes (partOfMemberName)); 


liNodesFound. forEach(li => li.classList.add("highlighted")); 
}; 


const $ = document. querySelector.bind(document); 
const $$ = document.querySelectorAll.bind(document); 





highlightChatMembersBy("ert"); 


Codebeispiel 4.3 additional_files/04/examples/highlight_chat_members_ref2.js 


Außerdem war der alte Funktionsname highlightChatMembers nun nicht mehr 
treffend. Der Name highlightChatMembersBy verdeutlicht, dass die Funktion 
einen Parameter (hier: partOfMemberName) entgegennimmt. Sie können die 
Signatur 


highlightChatMembersBy (partOfMemberName) 


praktisch wie einen Satz aussprechen: 
»markiere die Chatteilnehmer anhand eines Teils ihres Namens« 


Ein wichtiges Prinzip beim Programmieren ist das Single Responsibility Principle 
(Martin 2002). Angewandt auf Funktionen bedeutet es: Jede Funktion sollte immer 
nur eine Sache tun. Die Funktion highlightChatMembersBy tut eindeutig zu 
viel: Chat-Mitglieder finden, filtern und hervorheben ... Die richtige Medizin dage- 
gen nennt sich Extract Method (Fowler 1999) — das Extrahieren neuer Methoden 
bzw. Funktionen aus bestehendem Code. 


"use strict"; 


{ 
const highlightChatMembersBy = partOfMemberName => { 
const liNodesFound = chatMembers() 
„filter(liNode => 
liNode. innerHTML.includes (partOfMemberName)); 


liNodesFound. forEach(highlight); 


’ 


const chatMembers = () => Array. from($$("#chat_members 1i")); 
const highlight = el => el.classtist.add("highlighted"); 





const $ = document.querySelector.bind(document); 
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‘use strict"; 





const highlightChatMembersBy = partOfMemberName => { 
const liNodes = Array.from($$("#chat_members li")); 
const liNodesFound = liNodes. filter(liNode => 
liNode. innerHTML. includes (partOfMemberName)); 


liNodesFound. forEach(li => li.classList.add("highlighted")); 
3 


const $ = document.querySelector.bind(document); 
const $$ = document.querySelectorAll.bind(document); 


highlightChatMembersBy("ert"); 


Codebeispiel 4.3 additional_fles/04/examples/highlight_chat_members_ref2.js 


Außerdem war der alte Funktionsname highlightChatMembers nun nicht mehr 
treffend. Der Name highlightChatMembersBy verdeutlicht, dass die Funktion 
einen Parameter (hier: partOfMemberName) entgegennimmt. Sie können die 
Signatur 


highlightChatMembersBy(partOfMemberName) 


praktisch wie einen Satz aussprechen: 
»markiere die Chatteilnehmer anhand eines Teils ihres Namens« 


Ein wichtiges Prinzip beim Programmieren ist das Single Responsibility Principle 
(Martin 2002). Angewandt auf Funktionen bedeutet es: Jede Funktion sollte immer 
nur eine Sache tun. Die Funktion highlightChatMembersBy tut eindeutig zu 
viel: Chat-Mitglieder finden, filtern und hervorheben ... Die richtige Medizin dage- 
gen nennt sich Extract Method (Fowler 1999) — das Extrahieren neuer Methoden 
bzw. Funktionen aus bestehendem Code. 


use strict"; 


{ 
const highlightChatMembersBy = partOfMemberName => { 
const liNodesFound = chatMembers() 
‚filter(liNode => 
liNode. innerHTML. includes (partOfMemberNanme)); 


liNodesFound. forEach(highlight); 
}; 


const chatMembers = () => Array.from($$("#chat_members 1i")); 
const highlight = el => el.classList.add("highlighted"); 


const $ = document.querySelector.bind(document); 
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const $$ = document.querySelectorAll.bind(document); 


highlightChatMembersBy("ert"); 





Codebeispiel 4.4 additional_files/04/examples/highlight_chat_members_ref3.js 


Das Finden der Mitglieder übernimmt nun die Funktion chatMembers, während 
highlight sich um die Hervorhebung (engl. Highlighting) eines einzelnen Ele- 
ments kümmert. Ein weiterer Kandidat für eine eigene Funktion ist das Prüfen auf 
Treffer: 


LiNode. innerHTML. includes (partOfMemberName) 


Ein geeigneter Bezeichner für die Funktion wäre doesMemberMatch. Codebei- 
spiel 4.5 zeigt den neuen Code mit extrahierten Funktionen. 








"use strict"; 


{ 
const highlightChatMembersBy = partOfMemberName => { 


const liNodesFound = chatMembers() 
„filter(memberElement => 
doesMemberMatch(partOfMemberName, memberElement)); 


liNodesFound. forEach(highlight); 

}; 

const doesMemberMatch = (partOfMemberName, memberElement) => 
memberElement.. innerHTML. includes (partOfMemberName) ; 


const chatMembers = () => Array.from($$("#chat_members 1i")); 
const highlight = el => el.classList.add("highlighted"); 


const $ = document.querySelector.bind(document); 
const $$ = document.querySelectorAll.bind(document); 


highlightChatMembersBy("ert"); 


Codebeispiel 4.5 additional_files/04/examples/highlight_chat_members_ref4.js 


Jetzt fällt vielleicht auf, dass Sie die Konstante 1iNodesFound im Grunde nicht 
mehr benötigen. Auch der Name /iNodesFound trägt nicht unbedingt dazu bei, den 
Code verständlicher zu machen. Nehmen Sie die Bezeichner einfach raus. Damit 
verkürzen Sie: 


u, 


gg const liNodesFound = chatMembers() 
 „filter(memberElement = 
doesMemberMatch(partOfMemberName, memberElement)); 
liNodesFound. forEach(highlight); 
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auf eine Zeile (auch wenn wir sie aus Lesbarkeitsgründen in mehrere Zeilen umbre- 
chen): 


ze 






hatMembers() 

“.filter(memberElement => 
doesMemberMatch(partOfMemberName, memberElement)) 

.forEach(highlight); 


Damit ist die Implementierung der Funktion highlightChatMembersBy auch 
leicht zu lesen: 


1. Besorge die chatMembers. 
2. Filtere diezu partOfMemberName passenden (engl. does match) heraus. 


3. Hebe alle gefundenen hervor. 


Wer die Details verstehen möchte, kann die einzelnen Funktionen jederzeit nach- 
lesen, aber so kommuniziert hightlightChatMembersBy schon mal die groben 
Schritte, die vorher in den Details versteckt waren. 


Newspaper-Metapher 
























































Abb. 4.1 Foto: Olu Eletu22, CCO 1.0? 





22. https://unsplash.com/photos/E7RLgUjjazc 
23. http://creativecommons.org/publicdomain/zero/1.0/ 
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Als Nächstes bietet es sich an, die neuen, extrahierten Funktionen etwas zu sor- 
tieren: Grobe High-Level-Funktionen gehören nach oben, detaillierte Low-Level- 
Hilfsfunktionen nach unten. Dadurch können Sie Ihren Code lesen wie eine Zei- 
tung — oben stehen die »dicken« Headlines, und wer mehr wissen möchte, erfährt 
sukzessive mehr Details. Das ist die sogenannte Newspaper-Metapher von Robert 
C. Martin (2008). 





!use strict"; 





const highlightChatMembersBy = partOfMemberName => { 
chatMembers() 
‚filter(member => 
doesMemberMatch(partOfMemberName, member) ) 
„forEach(highlight); 
1. 


const doesMemberMatch = (partOfMemberName, memberElement) => 
memberElement. innerHTML. includes (partOfMemberName) ; 


const chatMembers = () => Array. from($$("#chat_members li")); 
const highlight = el => el.classList.add("highlighted"); 
const $ = document.querySelector.bind(document); 


const $$ = document.querySelectorAll.bind(document); 


highlightChatMembersBy("ert"); 


Codebeispiel 4.6 additional_files/04/examples/highlight_chat_members_ref5.js 


4.4 Array.from war gestern. Jetzt heißt es: Array- 
Methoden für alle! 


Jedes Mal, wenn Sie auf dem Ergebnis der $$ -Funktion eine High-Order-Function 
wie map oder filter aufrufen möchten, müssen Sie es vorher mit Array. from 
konvertieren, z.B. 


@l const chatMembers = () => Array.from($$("#chat_members 11%)); 
Finden Sie das nicht auch ein wenig nervig? 


Abhilfe bietet die folgende Zeile (aus dem legendären bling.js-Gist von Paul Irish?*). 
Sie müssen sie nicht im Detail verstehen, aber sie sorgt im Grunde dafür, dass einer 
NodeList auch alle Methoden eines Arrays zur Verfügung stehen. 





24. https’/gist.github.com/paulirish/12fb951a86893a454b32 
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NodeList.prototype.__proto__ = Array.prototype; 


Damit entfällt die Notwendigkeit, die NodeList mittels Array. from inein Array 
zu wandeln. Die Funktion chatMembers wird dadurch recht einfach. 


'use strict"; 





const highlightChatMembersBy = partOfMemberName => { 
chatMembers() 
.filter(member => 
doesMemberMatch(partOfMemberName, member) ) 
.forEach(highlight); 
}; 


const doesMemberMatch = (partOfMemberName, memberElement) => 
memberElement. innerHTML.includes (partOfMemberNanme) ; 


const chatMembers = () => $$("#chat_members li"); 
const highlight = el => el.classList.add("highlighted"); 


const $ = document.querySelector.bind(document); 
const $$ = document.querySelectorAll.bind(document); 
NodeList.prototype.__proto__ = Array.prototype; 


highlightChatMembersBy("ert"); 
. 


Codebeispiel 4.7 additional_hles/04/examples/highlight_chat_members_ref6.js 


Zugegeben: Hier lohnt es sich kaum, da das Array. from nur ein einziges Mal im 
Code vorkommt. Es macht aber durchaus Sinn, die Zeile einfach einzubinden, um 
dann etwas entspannter zu programmieren. Sie müssen dann nicht jedes Mal dar- 
über nachdenken, ob Sie vielleicht gerade eine Methode von Array auf der Node- 
List verwenden und deswegen erst konvertieren müssen. 


Aufpassen müssen Sie nur, wenn Sie weitere Drittbibliotheken einbinden, die evtl. 
ebenfalls die NodeList verändern könnten. In diesem Fall müssen Sie eben wieder 
ZU Array.from zurück. 


4.5 Und jetzt noch eine klitzekleine Verbesserung 


Leider gibt es auch noch einen kleinen Bug in der Anwendung, den Sie sich nun. 
Wenn Sie als Suchstring 'Bert' verwenden, wird nur Berthold, aber nicht Heri- 
bert selektiert. Das liegt daran, dass der Stringvergleich case sensitive ist, also 
Groß- und Kleinschreibung berücksichtigt. Eine einfache Möglichkeit, Groß- und 
Kleinschreibung bei der Suche zu ignorieren, ist, beide am Vergleich beteiligten 
Strings vorher komplett in Kleinbuchstaben umzuwandeln — mit der String- 
Methode toLowerCase. 
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NodeList.prototype.__proto__ = Array.prototype; 


Damit entfällt die Notwendigkeit, die NodeList mittels Array. from inein Array 
zu wandeln. Die Funktion chatMembers wird dadurch recht einfach. 


"use strict"; 


{ 






const highlightChatMembersBy = partOfMemberName => { 
chatMembers() 
„filter(member => 
doesMemberMatch(partOfMemberName, member) ) 
.forEach(highlight); 
5 


const doesMemberMatch = (partOfMemberName, memberElement) => 
memberElement.innerHTML.includes (partOfMemberNanme) ; 


const chatMembers = () => $$("#chat_members li"); 
const highlight = el => el.classList.add("highlighted"); 


const $ = document.querySelector.bind(document); 
const $$ = document.querySelectorAll.bind(document); 
NodeList.prototype. __proto__ = Array.prototype; 


highlightChatMembersBy("ert"); 


Codebeispiel 4.7 additional_fles/04/examples/highlight_chat_members_ref6.js 


Zugegeben: Hier lohnt es sich kaum, da das Array. from nur ein einziges Mal im 
Code vorkommt. Es macht aber durchaus Sinn, die Zeile einfach einzubinden, um 
dann etwas entspannter zu programmieren. Sie müssen dann nicht jedes Mal dar- 
über nachdenken, ob Sie vielleicht gerade eine Methode von Array auf der Node- 
List verwenden und deswegen erst konvertieren müssen. 


Aufpassen müssen Sie nur, wenn Sie weitere Drittbibliotheken einbinden, die evtl. 
ebenfalls die NodeList verändern könnten. In diesem Fall müssen Sie eben wieder 
ZU Array.from zurück. 


4.5 Und jetzt noch eine klitzekleine Verbesserung 


Leider gibt es auch noch einen kleinen Bug in der Anwendung, den Sie sich nun. 
Wenn Sie als Suchstring '"Bert' verwenden, wird nur Berthold, aber nicht Heri- 
bert selektiert. Das liegt daran, dass der Stringvergleich case sensitive ist, also 
Groß- und Kleinschreibung berücksichtigt. Eine einfache Möglichkeit, Groß- und 
Kleinschreibung bei der Suche zu ignorieren, ist, beide am Vergleich beteiligten 
Strings vorher komplett in Kleinbuchstaben umzuwandeln — mit der String- 
Methode toLowerCase. 





62 4 Und nun: ab ins HTML 





“Muse strict"; 





const highlightChatMembersBy = partOfMemberName => { 
chatMembers() 
„filter(member > 
doesMemberMatch(partOfMemberName, member) ) 
„forEach(highlight); 
H 


const doesMemberMatch = (partOfMemberName, memberElement) => 
memberElement. innerHTML.toLowerCase() 
„includes (partOfMemberName.toLowerCase()); 


const chatMembers = () => $$("#chat_members li"); 
const highlight = el => el.classList.add("highlighted"); 


const $ = document.querySelector.bind(document); 
const $$ = document.querySelectorAll.bind(document); 
NodeList.prototype.__proto__ = Array.prototype; 


highlightChatMembersBy("ert"); 


Codebeispiel 4.8 additional_files/04/examples/highlight_chat_members_ref6_lowercase.js 


Es gäbe übrigens noch genügend Möglichkeiten, das Refactoring fortzuführen, 
etwa mit Hilfe von funktionaler oder objektorientierter Programmierung oder 
gar hexagonaler Architektur. »Doch das ist eine andere Geschichte und soll ein 
anderes Mal erzählt werden.« 
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Events feiern, wie sie fallen ... 


Wenn das neue Chat-Feature heute Abend fertig ist, ver- | 


anstalten wir eine Release-Party im Büro. Nichts Großes 
— aber es gibt was zu trinken, gute Musik und auch 
eine Kleinigkeit zu essen... 






Abb. 5.1 Foto: Yutacar?>, CCO 1.026 








| 


Der Code ist nun in eine JavaScript-Datei ausgelagert und etwas »sauberer« 
geworden. Leider ist Björn noch nicht zufrieden. Da fehlt noch was... 


Natürlich sollten Besucher der Website kein JS programmieren müssen, um Chat- 
mitglieder hervorzuheben. Die Hervorhebungen sollten sich automatisch anhand 
der Eingabe im Suchfeld ändern. 


Dazu muss der Code auf Benutzereingaben reagieren. Der Browser stellt dazu 
sogenannte Events zur Verfügung. Mit Events sind hier also leider keine Hochzei- 
ten oder Partys gemeint. 


5.1 Events im Browser 


Für den Browser ist schon jede kleine Einflussnahme durch den Anwender ein 
Event. Ein Event kann dabei fast alles sein, beispielsweise: 





25. https://unsplash.com/photos/J)KMnm3CIncw 
26. http://creativecommons.org/publicdomain/zero/1.0/ 
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> das Anklicken eines Buttons 

> das Überfahren eines Bildes mit der Maus 
>» das Loslassen einer Taste 

> das Verlassen eines Eingabefeldes 


> Fingergesten auf Touchbildschirmen, wie z.B. Zoom 


Es gibt auch Events, die nicht direkt vom Anwender ausgelöst werden, z.B. durch 
Netzwerkanfragen oder bei abgeschlossenen Ladevorgängen von Dateien. Vorerst 
konzentrieren wir uns aber auf Events, die unmittelbar mit dem Anwenderverhal- 
ten zu tun haben. 


5.2 Zum anständigen Behandeln von Events: 
Eventhandler 
5.2.1 Vorbereitende Maßnahmen 


Starten Sie zunächst mit einem kleinen Experiment in der Konsole. Das Event, das 
Sie interessiert, ist das Loslassen einer Taste im Eingabefeld. Im HTML-Dokument 
des Chats finden Sie das Eingabefeld ( input -Element) innerhalb eines div -Ele- 
ments mit der id member_search: 


» <div id="member_search"><input type="text" placeholder="...Find a 


. 


Selektieren Sie das Feld zunächst mittels $('#member search input'). Sie 
erhalten das input -Element als Rückgabewert in der Konsole. Wenn Sie den 
Mauszeiger darüber bewegen, erkennen Sie, dass es sich um das richtige Feld han- 
delt. 


An dieses Feld müssen Sie ein Event binden. Verwenden Sie dazu die Methode 
addEventListener. Nahezu jedes HTML-Element-Objekt verfügt über diese 
Methode. 


$('#member_search input').addEventListener( .. ); 
addEventListener benötigt zwei Argumente. Das erste Argument ist der 
Eventtyp als String. In diesem Fall sollten Sie 'keyup' verwenden — das Loslas- 


sen einer Taste. 


$('#member_search input').addEventListener('keyup', ..); 
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Das zweite Argument muss eine Funktion sein — der Browser führt sie beim Auf- 
treten des Events aus. Verwenden Sie erst einmal etwas Einfaches, um zu sehen, ob 
es überhaupt funktioniert: 


() => alert(1) 


Die Funktion, die Sie auf das Event registrieren, wird übrigens als Eventhandler 
bezeichnet. Diese Funktion verarbeitet das angegebene Event. 


Damit ist die Anweisung vollständig — geben Sie sie in die Konsole ein: 


$('#member_search input').addEventListener('keyup', () => 
alert(1)); 


Sobald Sie in das Eingabefeld klicken und eine Taste drücken, erscheint beim Los- 
lassen eine Alert-Box mit der ı. Das ist sicherlich noch nicht sehr sinnvoll. Viel- 
leicht ist auch das Wegklicken der Alert-Boxen ein wenig nervig, aber Sie wissen 
nun, dass es funktioniert. Check. Mission erfolgreich. 


5.2.2 ... und nun alles zusammen 


Nun kommt der etwas schwierigere Teil: Sie müssen aus dem vorhanden Code für 
Highlighting und Eventregistierung ein vollständiges Programm bauen. 


Entfernen Sie den Aufruf hightlightChatMembers ('ert'); aus der JS-Datei. 
Stattdessen soll das keyup -Event den Aufruf der Funktion auslösen: 


" $('#member_search input') 
-  „addEventListener('keyup', () => 
3 hightlightChatMembers('ert')); 


...und tatsächlich: Sobald Sie im Suchfeld eine Taste drücken, ändert sich das 
Highlighting. Statt des festen Highlightings zum String 'ert' möchten Sie aber 
die tatsächliche Eingabe verwenden. Wie kommen Sie da dran? 


Sie benötigen nochmal das Objekt des Input-Elements. Sie können es sich wieder 
mittels $(#member_search input‘) besorgen — und es dann nach dem Wert fra- 
gen, den der Benutzer eingegeben hat. Den Wert finden Sie in der Eigenschaft 
value — also $('#member search input').value. Mehr zu dieser und 
anderen Eigenschaften erfahren Sie in Lektion 7. 


Zusammengesetzt erhalten Sie folgende Anweisung: 


 $('#member_search input') 
„addEventListener('keyup', () => 
hightlightChatMembers ($( '#member_search input').value)); 
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Damit ergibt sich nun insgesamt folgender Code: 





"use strict"; 


const highlightChatMembersBy = partOfMemberName => { 
chatMembers() 
„filter(member => 
doesMemberMatch(partOfMemberName, member) ) 
„forEach(highlight); 
Ir 


const doesMemberMatch = (partOfMemberName, memberElement) => 
memberElement.innerHTML.toLowerCase() 
„includes (partOfMemberName.toLowerCase()); 


const chatMembers = () => $$("#chat_members li"); 
const highlight = el => el.classList.add("highlighted"); 


const $ = document.querySelector.bind(document); 
const $$ = document.querySelectorAll.bind(document); 
NodeList.prototype.__proto__ = Array.prototype; 


$("#member_search input") 
.addEventListener("keyup", () => 
highlightChatMembersBy ($("#member_search input").value)); 


Codebeispiel 5.1 additional_files/05/examples/highlight_chat_members_1_event/high- 
light_chat_members.js 


Experimentieren Sie ein wenig mit der aktuellen Implementierung. Geben Sie ver- 
schiedene Strings ein. Was fällt Ihnen auf? 





5.3 Guard Clauses: Wächter für Ihre Funktionen 67 





5.3 Guard Clauses: Wächter für Ihre Funktionen 





Huch — ich hab’ gerade einen Bug gefunden. Wenn ich 
nach Chatmitgliedern suche, passiert es sehr schnell, 
dass alle hervorgehoben werden. 


Bitte beheben Sie das! So können wir das Feature 
unmöglich online stellen. 





Chat 





























sheinur: Anyoncy mare? 














Tja — das Problem besteht darin, dass das Programm zwar die passenden Mitglie- 
der hervorhebt, aber diese Hervorhebung nicht wieder entfernt. 


Statt nun mühsam herauszufinden, welche Hervorhebungen Sie wieder entfernen 
müssen, ist es einfacher, Sie entfernen einfach alle Hervorhebungen und heben 
anschließend nur die jeweils passenden hervor. Dazu benötigen Sie weiteren 
Code, der die CSS-Klasse von allen Mitgliedern entfernt: 


| const removeHighlightsFromAllChatMembers = () => 
.  chatMembers().forEach(removeHighlight); 
„const removeHighlight = el => el.classList.remove("highlighted'); 





Im Übrigen ist es überhaupt kein Problem, dass einige der 1i -Elemente mit Chat- 
mitgliedern die Klasse highlighted gar nicht haben — in dem Fall wird auch nichts 
entfernt. 


Ordnen Sie die beiden Funktionen passend zu ihrem Detailgrad der Funktionen 


ein. Außerdem muss die neue Funktion 
removeHighlightsFfromAllChatMembers noch aufgerufen werden. Dazu emp- 
fiehlt es sich, eine übergeordnete Funktion namens 


updateHighlightingoOfChatMembers zu erstellen, die zunächst alle Hight- 
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lights entfernt ( removeHighlightsFromAllChatMembers ) und danach die rich- 
tigen Chatmitglieder markiert (hightlightChatMembersBy ): 


const updateHighlightingOfChatMembers = partOfMemberName => { 
removeHighlightsFromAllChatMembers(); 
hightlightChatMembersBy(partOfMemberName); 


’ 





Nun müssen Sie nur noch die neue Funktion 
updateHighlightingoOfChatMembers statt der reinen Markierungsfunktion 
hightlightChatMembersBy in den Eventhandler einbinden. Sie erhalten diesen 
Code: 


const updateHighlightingOfChatMembers = partOfMemberName => { 
removeHighlightsFromAllChatMembers(); 
highlightChatMembersBy (partOfMemberName) ; 


}; 


const removeHighlightsFromAllChatMembers = () = 
chatMembers().forEach(removeHighlight); 


const highlightChatMembersBy = partOfMemberName => ı 
chatMembers() 
.filter(member => 
doesMemberMatch(partOfMemberName, member) ) 
„forEach(highlight); 
han 


const doesMemberMatch = (partOfMemberName, memberElement) => 
memberElement.innerHTML.toLowerCase() 
‚includes (partOfMemberName.toLowerCase()); 


const chatMembers = () => $$("#chat_members li"); 
const highlight = el => el.classList.add("highlighted"); 
const removeHighlight = el => el.classList.remove("highlighted"); 


const $ = document.querySelector.bind(document); 
const $$ = document. querySelectorAll.bind(document); 
NodeList.prototype.__proto__ = Array.prototype; 


$("#member_search input") 
„addEventListener("keyup", () => 
updateHighlightingOfChatMembers ($("#member_search 
input").value)); 






Codebeispiel 5.2 additional_files/05/examples/highlight_chat_members_2_remove/high- 
light_chat_members.js 


Der Code aus Codebeispiel 5.2 funktioniert... fast. Er funktioniert bis auf die kleine 
Unschönheit, dass bei einer leeren Eingabe alle Mitglieder selektiert sind. Der leere 
String kommt in jedem String vor! 
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Dieses Verhalten können Sie einfach dadurch unterdrücken, dass Sie zu Beginn der 
Funktion hightlightChatMembersBy prüfen, ob partOfMemberName leer ist. 
Bei einem Leerstring muss die Funktion einfach die Arbeit verweigern. Beenden 
Sie die Funktion vorzeitig mittels return. 


if (partOfMemberName === "") return; 


Zeilen wie diese, die vor Ausführung einer Funktion prüfen, ob die Werte der ein- 
gehenden Argumente überhaupt Sinn machen, heißen Guard-Clauses?’ oder ein- 
fach Guards. Sie schützen die Funktionen vor ungültigen Eingangswerten. 


. const hightlightChatMembersBy = partOfMemberName => { 
if (partOfMemberName === "") return; 
chatMembers() 
.filter(member => 
doesMemberMatch(partOfMemberName, member) ) 
„forEach(highlight); 
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Codebeispiel 5.3 Die Funktion highlightChatMembersBy mit Guard 


Der Code aus Codebeispiel 5.3 verhält sich endlich wie gewünscht. Bevor Sie zu 
Björn stürmen, um ihm die gute Nachricht zu überbringen, könnten Sie sich viel- 
leicht noch ein wenig Zeit nehmen, um den Code zu verbessern. Ihr Wartungspro- 
grammierer wird es Ihnen irgendwann danken! 


5.4 Der gekonnte Einstieg — mit init 


Der Code zur Eventregistierung steht auch noch etwas unmotiviert da. Besser wäre 
es, ihn in eine Funktion zu packen. Das hat viele Vorteile: Er wird wiederverwend- 
bar und bekommt einen Namen (damit ist er leichter zu identifizieren). Außerdem 
gibt es weitere Vorteile in Bereichen, mit denen wir uns noch nicht beschäftigt 
haben — z.B. ist der Code leicher zu testen. 


Zwei Funktionsnamen bieten sich hier an: registerEvents oder einfach init. Wenn Sie 
möchten, könnten Sie auch noch konkreter werden und die Funktion sogar regis- 
terEventsForChatMemberHighlighting nennen. In diesem Kontext, in dem die Datei 
aber nur eine einzige Aufgabe hat, ist das generische init durchaus akzeptabel. 


Der Name init steht für Initialisierung. Das ist quasi die Funktion, die alles andere 
einleitet und somit einen Einstiegspunkt in den restlichen Code bietet. Im Grunde 
können Sie die Funktion nennen, wie Sie möchten, aber init hat sich etabliert. 








27. http://c2.com/cgi/wiki?GuardClause 
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Andere Programmierer lesen den Funktionsnamen und verstehen sofort, was Sie 
damit meinen. 


Im Sinne der Newspaper-Metapher gehört die Funktionsdefinition von init an 
den Anfang. Der Aufruf init () kann aber erst erfolgen, wenn alle Definitionen 
abgeschlossen sind. 


"use strict"; 








{ 
const init = () => $("#member_search input") 
„addEventListener("keyup", () = 
updateHighlightingOfChatMembers ($("#member_search 
ut").value)); 






iny 
const updateHighlightingOfChatMembers = partOfMemberName => { 
removeHighlightsFromAllChatMembers(); 


hightlightChatMembersBy(partOfMemberName); 
hr 


const removeHighlightsFromAllChatMembers = () => 
chatMembers().forEach(removeHighlight); 


const hightlightChatMembersBy = partOfMemberName => { 
if (partOfMemberName === "") return; 
chatMembers() 
.filter(member => 
doesMemberMatch(partOfMemberName, member) ) 
„forEach(highlight); 
4; 


const doesMemberMatch = (partOfMemberName, memberElement) => 
memberElement.innerHTML.toLowerCase() 
„includes (partOfMemberName.toLowerCase()); 


const chatMembers = () => $$("#chat_members li"); 

const highlight = el => el.classList.add("highlighted"); 

const removeHighlight = el => el.classList.remove("highlighted"); 
const $ = document.querySelector.bind(document); 

const $$ = document.querySelectorAll.bind(document); 
NodeList.prototype.__proto__ = Array.prototype; 

init(); 

Codebeispiel 5.4 additional_files/05/examples/highlight_chat_members_3_init/high- 
light_chat_members.js 


5.5 Schauen Sie hinter die Fassade — mit dem 
Event-Objekt 


Dass Sie hier noch etwas verbessern können wird deutlich, wenn Sie sich die Event- 
registrierung genauer betrachten. 





5.5 Schauen Sie hinter die Fassade — mit dem Event-Objekt 71 





 $('#member_search input') 
„addEventListener('keyup', () => 
hightlightChatMembers($( '#member_search input').value)); 





Die Funktion, die Sie hier als Eventhandler registrieren, ist diese: 
() => hightlightChatMembers ($('#member_search input').value); 


Das Interessante dabei ist, dass die Funktion beim Aufruf durch das Event dieses 
automatisch als Argument übergeben bekommt. Sie müssen der Funktion nur 
noch einen Parameter spendieren, um das Event aufzufangen: 


event => hightlightChatMembers ($('#member_search input').value); 


Was können Sie mit dem event anfangen? Sie können es beispielsweise loggen, 
um zu sehen, was es alles beinhaltet: 


event => { 
console.log(event); 
hightlightChatMembers($('#member_search input').value); 





Wenn Sie die Taste a drücken, zeigt die Konsole: 
keyup { target: <input>, key: "a", charCode: ®, keyCode: 65 } 
Ein Klick auf das keyup verrät Ihnen, dass es sich bei event um ein JS-Objekt vom 


»Typ«”® KeyboardEvent handelt. Keyboardevents besitzen viele interessante 
Eigenschaften. Einige davon zeigt die folgende Tabelle: 





type keyup | 
code KeyA 

key a 

keyCode 65 

















28. Eigentlich gibt es in JS keine spezifischen Objekttypen. Korrekt wäre: Es handelt sich um ein JS- 
Objekt, das das Objekt Keyboardkvent in seiner Prototype-Chain hat. Wir verwenden den Begriff 
Typ hier als Vereinfachung. Es geht nur darum, dass alle Objekte des gleichen »Typs« auch die glei- 
chen Eigenschaften haben. 
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timestamp [Timestamp, wann das Event sich ereignet hat] ] 
target [Element, das das Event ausgelöst hat] 

ctrIKey false [war die Ctrl-Taste dabei gedrückt?] 

altKey false [war die Alt-Taste dabei gedrückt?] zu 











Es gibt noch viel mehr Eigenschaften, doch schon diese wenigen verdeutlichen, 
dass Sie im Eventobjekt alle Informationen finden, die beim Auftreten des Events 
eine Rolle spielen, z.B.: 


> Welche Art von Event ist das? keyup 
> Welche Taste wurde losgelassen? a 
> Wann wurde das Event ausgelöst? 


> Wo wurde das Event ausgelöst? 


Diese Informationen können Sie dann in Ihrem Eventhandler verwerten. Für das 
aktuelle Programm ist vor allem die Eigenschaft target interessant. Da target 
das gesuchte Input-Field enthält, das Sie sonst mittels $('#member search 
input') selektieren, können Sie den Eventhandler auch folgendermaßen regis- 
trieren: 


event => hightlightChatMembers(event.target.value); 


Das hat wieder eine Reihe von handfesten Vorteilen. Es ist in jedem Fall perfor- 
manter, da der Browser das Element-Objekt nicht noch einmal ermitteln muss. In 
target liegt es bereits vor. Der viel wichtigere Vorteil ist allerdings die verbes- 
serte Wartbarkeit. Sollte sich der Selektor zum Finden des Feldes ändern (z.B. weil 
sich die HTML-Struktur ändert), so müssen Sie nicht daran denken, den Eventhand- 
ler anzupassen. Er bezieht sich immer auf das jeweilige target, völlig unabhän- 
gig davon, wie Sie das Element gefunden und das Event darauf registriert haben. 


"use strict"; 


ft 
const init = () => $("#member_search input") 
„addEventListener("keyup", event => 
updateHighlightingOfChatMembers(event.target.value)); 


const updateHighlightingOfChatMembers = partOfMemberName => { 
removeHighlightsFromAllChatMembers(); 
hightlightChatMembersBy(partOfMembe rName); 


r 


const removeHighlightsFromAllChatMembers = () => 
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chatMembers().forEach(removeHighlight); 


const hightlightChatMembersBy = partOfMemberName => { 
if (partOfMemberName === "") return; 
chatMembers() 
.filter(member => 
doesMemberMatch(partOfMemberName, member) ) 
.‚forEach(highlight); 
}; 


const doesMemberMatch = (partOfMemberName, memberElement) => 
memberElement. innerHTML.toLowerCase() 
„includes (partOfMemberName.toLowerCase()); 


const chatMembers = () => $$("#chat_members li"); 
const highlight = el => el.classList.add("highlighted"); 
const removeHighlight = el => el.classList.remove("highlighted"); 


const $ = document.querySelector.bind(document); 
const $$ = document.querySelectorAll.bind(document); 
NodeList.prototype.__proto__ = Array.prototype; 


init(); 





Codebeispiel 5.5 additional_fles/05/examples/highlight_chat_members_4_target/high- 
light_chat_members.js 


Übrigens können Sie event noch als e abkürzen. Normalerweise gelten Abkür- 
zungen als »böse« und sollten vermieden werden — in diesem Fall geht das aber 
in Ordnung. Der einzelne Buchstabe e ist eine gängige Abkürzung für event und 
ist akzeptabel, solange der Scope (Sichtbarkeitsbereich der Variable) auf eine sehr 
kurze Funktion begrenzt ist. 


Jetzt ist es soweit — Sie können Björn das verbesserte Feature zeigen, und weil er 
so zufrieden damit ist, schmeißt er nun doch noch eine Party — hoffentlich wird 
das ein unvergessliches Event! 


Danke! Genauso hab! ich mir das vorgestellt! Und hey, 
wir sehen uns heute Abend! 
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5.6 preventDefault oder: Wer mag schon immer 
nur »Standard«? 


Am übernächsten Tag, als sich Björn wieder ein wenig von der Party erholt hat, prä- 
sentiert er die nächste Anforderung. 
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Wie Sie bestimmt noch wissen, gibt es auf der ne | 
einen kleinen Newsbereich. Der Bereich zeigt die aktuel- 
len News in einer Box mit Scrollbalken an. Das möchten 
wir gerne ändern. 


In Zukunft soll dort immer nur eine Nachricht angezeigt 
werden. Stattdessen soll es dann Vor- und Zurück-But- 
tons geben, mit denen sich die News durchblättern las- 
sen. 





Unser Designer hat das Layout bereits fertig, es fehlt nur 
noch die Funktionalität. 


© 
Tutoren streikeni!! 





warten. Damit das Layout nun nicht nackt im Raume steht ich 





klein und leer vorkommt, springe ich ein: der Blindtext. Genat 
diesem Zwecke erschaffen, immer im Schatten meines großen Bruders 
»Lorem Ipsum«, freue ich mich jedes Mai, wenn Sie sin paar Zeilen 


esen, 








0 


Wenn ein Kunde »nur noch« sagt, ist das meistens kein gutes Zeichen. Na gut, los 
geht's — schließlich zahlt Björn nicht schlecht... 


Später einmal, wenn alles fertig ist, wird der Server die Nachrichten liefern. Damit 
Sie aber jetzt schon Daten zum Ausprobieren haben, haben wir uns erlaubt, Ihnen 
Blindtext in Form eines Arrays zur Verfügung zu stellen: 


const messages = [ 
“<h1>Tutoren streiken!!!</h1> 
...  <h2>Alle Einsendeaufgaben werden ab sofort mit ® Punkten 
bewertet</h2> 
1 <p>[&hellip;]</p> 
<p>am 25.09.2015 von K. Einer</p>‘, 
“<h1>Wahnsinn !</h1> 
<h2>Wie ich mit einer dämlichen Idee ein Vermögen machte</h2> 
<p>[&hellip; ]</p> 
<p>am 13.08.2015 von Dr. B. Lödmann</p>‘, 
“<hl1>Prokrastination?</h1> 
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ı <h?2>Wie oft hörst du dich selbst sagen: „Nein, ich hab’s noch 
nicht erledigt; ich habe es vor!“</h2> 

<p>[&hellip;]</p> 

<p>am 02.06.2015 von A. Meisenbär</p>" 





Codebeispiel 5.7 Ausschnitt aus additional_files/05/examples/newsboard.js 


Hier ist noch das vorgegebene HTML: 
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<meta charset="utf-8" /> 


<title>Newsboard<s/title> 


<meta name="viewport" content="width=device-width, 





<div class="newsboard_wrapper"> 
<div class="newsboard"> 
<span class="message_number">3</span> 


<a href="#" class="close_button" title="Delete 
sage">&times;</a> 






<div class="newsboard_content"></div> 


<div class="paging_bar"> 
<span class="float_left"> 
<a href="#" Title="first">«</a> 
<a href="http://example.com" title="prev">«</a> 
</span> 


<span class="float_right"> 
<a href="http://example.com" title="next">></a> 
<a href="#" title="last">»</a> 

</span> 


<span class="progressbar"> 
<progress max="3" value="1" 
="messages_progress"></progress> 
</span> 
</div> 
</div> 
</div> 


Codebeispiel 5.8 additional_hles/05/examples/newsboard.html 


Die Nachrichten sollen im div-Element mit der Klasse newsboard content 
erscheinen. Direkt nach dem Laden sollte die erste Nachricht bereits angezeigt 
werden. Der Code ist zunächst nichts Besonderes: 
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“use strict"; 







const initt= () >t 
showFirstMessage(); 

h 

const showFirstMessage = () => showMessageByNumber (1); 

const showMessageByNumber = messageNumber => 
$(",newsboard_content").innerHTML = messages [messageNumber - 


const messages = [..]; 

const $ = document.querySelector.bind(document); 
const $$ = document.querySelectorAll.bind(document); 
init(); 


Bei der Initialisierung rufen Sie die Funktion showFirstMessage auf, die mittels 
showMessageByNumber (1) die erste Nachricht anzeigt. Letztere Funktion leistet 
die eigentliche Arbeit: Sie extrahiert die Nachricht aus dem Array und überträgt sie 
mittels innerHTML an die richtige Stelle im Dokument. 


Einen kleinen Kniff zeigt Zeile 11. Als Index für das messages -Array verwenden 
Sie den Parameter messageNumber , ziehen aber vorher noch 1 ab. Das ist not- 
wendig, weil das Array bei Index 0 beginnt. Wir möchten aber von der ersten 
Nachricht reden, nicht von der nullten. 


Jetzt wird es ein wenig interessanter. Binden Sie das click -Event an die Vor- und 
Zurück-Zeichen < und ». Sie können die Elemente, die die Zeichen enthalten, 
über das jeweilige title -Attribut prev bzw. next ansprechen. 


Aconst initt= )>t 

°  showFirstMessage(); 
$(' [title=next]').addEventListener('click', nextMessage); 
$(' [title=prevl').addEventListener('click', prevMessage); 


e => console. log('next'); 
=> console.log('prev'); 


const nextMessage 
const prevMessage 


nu 
® 


Leider funktioniert das noch nicht. Der Designer hat nämlich Links (a-Elemente) 
für die Vor- und Zurück-Zeichen verwendet. Wären es button -Elemente gewe- 
sen, hätten Sie kein Problem. Aber Links haben bereits ein Verhalten beim Ankli- 
cken: Sie rufen die im href -Attribut angegebene URL auf! 


Was tun? Sie könnten das Element natürlich ändern. Möglicherweise hat sich der 
Designer aber etwas dabei gedacht. Beispielsweise könnten die Links dafür da 
sein, dass das Newsboard auch ohne JS funktioniert — auf die klassische Weise. 


Es gibt eine bessere Lösung. Verhindern Sie einfach, dass die Links ihr Standardver- 
halten (Default) auslösen. 
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Dafür stellt das Event-Objekt die Methode preventDefault zur Verfügung. 


_ const nextMessage = e => { 
console. log('next'); 
e.preventDefault(); 
2 
const prevMessage = e => { 
console. log('prev'); 
e.preventDefault(); 


| 





Nachdem dieses Problem gelöst ist, können Sie sich darum kümmern, tatsächlich 
die Nachrichten umzublättern, statt nur Log-Nachrichten auszugeben! 


Die Kernproblematik ist hier, dass Sie sich die Nummer der gerade angezeigten 
Nachricht irgendwo merken müssen. Das heißt, die Anwendung hat einen 
Zustand (engl. state). Das Drücken des Vorwärtszeichens ist abhängig von diesem 
Zustand. Das Programm muss wissen, welche Nachricht gerade angezeigt wird, 
um die nächste zu bestimmen. 


Zustandsbehaftung ist immer etwas problematisch. Sie erschwert das Programm- 
verständnis. Im Grunde wollen wir einen veränderlichen Zustand (mutable State) 
bei der Programmierung vermeiden. Gerade in grafischen Oberflächen ist er aber 
oft ein notwendiges Übel. 


Im Moment haben Sie noch keine gute Lösung, um damit umzugehen — wir 
kommen später nochmal darauf zurück. Deswegen verwenden Sie erstmal eine 
Lösung, die nicht ideal ist. Sie können später immer noch ein Refactoring durch- 
führen. 


Speichern Sie die Nummer der aktuellen Nachricht in einer Variable, die sich meh- 
rere Funktionen teilen: 


let currentMessageNumber = 1; 


Damit haben Sie eine einfache Möglichkeit, den Wert beim Vor- und Zurückblät- 
tern zu ändern. 


const nextMessage = e => { 
showMessageByNumber(currentMessageNumber += 1); 
e.preventDefault(); 

}; 
const prevMessage = e => { 

showMessageByNumber (currentMessageNumber -= 1); 
e.preventDefault(); 

H 
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let currentMessageNumber = 1; 






Die Variable currentMessageNumber hat zum Glück keinen global-Scope, da sie 
nur innerhalb des äußeren Blocks existiert. Solange dieser Block nicht sehr viel grö- 
Ber wird, ist das tolerierbar. Sobald Ihre Anwendung wächst, brauchen Sie aber 
eine bessere Lösung. Wir kümmern uns in Lektion 7 darum. 


Hurra, es funktioniert! Hier ist der Code nochmal im Ganzen: 


use strict"; 


eonst nit= () =! 
showFirstMessage(); 
$(" [title=next]").addEventListener("click", nextMessage); 
$(" [title=sprev]").addEventListener("click", prevMessage); 
}; 


const showFirstMessage = () => showMessageByNumber (1); 


const nextMessage = e > { 
showMessageByNumber (currentMessageNumber += 1); 
e.preventDefault(); 

+; 

const prevMessage = e => { 

showMessageByNumber (currentMessageNumber -—= 1); 

e.preventDefault(); 

}; 


const showMessageByNumber = messageNumber => 
$(".newsboard_content").innerHTML = messages [messageNumber - 


const $ = document.querySelector.bind(document); 


const messages = | 

‘<h1>Tutoren streiken!!!</h1> 
<h2>Alle Einsendeaufgaben werden ab sofort mit ® Punkten 
wertet</h2> 
Ei) <p>Überall dieselbe alte Leier. Das Layout ist fertig, der 
Text lässt auf sich warten. Damit das Layout nun nicht nackt im Raume 
steht und sich klein und leer vorkommt, springe ich ein: der 
Blindtext. Genau zu diesem Zwecke erschaffen, immer im Schatten 
meines großen Bruders »Lorem Ipsum«, freue ich mich jedes Mal, wenn 
Sie ein paar Zeilen lesen.</p> 
30 <p class="newsboard_footer">am 25.09.2015 von K. Einer</p>', 


"<h1>Wahnsinn!</h1> 

<h2>wWie ich mit einer dämlichen Idee ein Vermögen machte</h2> 
3 <p>Polyfon zwitschernd aßen Mäxchens Vögel Rüben, Joghurt und 
Quark. "Fix, Schwyz! " quäkt Jürgen blöd vom Paß. Victor jagt zwölf 
Boxkämpfer quer über den großen Sylter Deich. Falsches Üben von 
Xylophonmusik quält jeden größeren Zwerg. Heizölrückstoßabdämpfung. 
Zwei flinke Boxer jagen die quirlige Eva und ihren Mops durch 
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Sylt. </p> 
a <p class="newsboard_footer">am 13.08.2015 von Dr. B. 
Lödmann</p>" : 


"<hl1>Prokrastination?</h1> 
<h2>Wie oft hörst du dich selbst sagen: „Nein, ich hab’s noch 
nicht erledigt; ich habe es vor!“</h2> 
<p>Denn esse est percipi - Sein ist wahrgenommen werden. Und 
weil Sie nun schon die Güte haben, mich ein paar weitere Sätze lang 
zu begleiten, möchte ich diese Gelegenheit nutzen, Ihnen nicht nur 
als Lückenfüller zu dienen, sondern auf etwas hinzuweisen, das es 
ebenso verdient wahrgenommen zu werden: Webstandards nämlich.</p> 
<p>Sehen Sie, Webstandards sind das Regelwerk, auf dem 
Webseiten aufbauen. So gibt es Regeln für HTML, CSS, JavaScript oder 
auch XML; Worte, die Sie vielleicht schon einmal von Ihrem Entwickler 
gehört haben. Diese Standards sorgen dafür, dass alle Beteiligten aus 
einer Webseite den größten Nutzen ziehen. Im Gegensatz zu früheren 
Webseiten müssen wir zum Beispiel nicht mehr zwei verschiedene 
Webseiten für den Internet Explorer und einen anderen Browser 
programmieren.</p> 

| <p class="newsboard_footer">am 02.06.2015 von A. Meisenbär</p>‘ 
l; 









let currentMessageNumber = 1; 


init(); 





2} 
Codebeispiel 5.9 additional_hles/05/examples/newsboard.js 


Ein paar Dinge lassen sich aber verbessern. Darum können Sie sich gleich in den 
Übungen kümmern. 


5.7 Kurz und knapp — on 





Genau wie document.querySelectorAll ist auch .addEventHandler oft 
umständlich. Viele Bibliotheken (z.B. jQuery) haben dafür die Methode on 
geprägt. So bedeutet beispielsweise $("#my button").on('click', _..) 
soviel wie »beim Klicken (on click) auf den Button mit der id my_button«. Da wir 
natürlich auch in den Genuss einer vereinfachten Schreibweise kommen möchten, 
verwenden wir wieder einmal Code, der ursprünglich aus bling.js?° stammt: 


Node.prototype.on = function (name, fn) { 
this.addEventListener(name, fn); 
return this; 

F 


NodeList.prototype.on = NodeList.prototype.addEventListener = 








29.  https://gist.github.com/paulirish/12fb951a86893a454b32 
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function (name, fn) { 
this. forEach(elem => elem.on(name, fn)); 
return this; 


1: 


Damit ist on sowohl auf Node als auch auf NodeList verfügbar und damit auf 
allem, was Sie mittels $ und $$ selektieren können. Hier ist ein Beispiel für die Ver- 
wendung auf NodeList: 


Für einen Online-Taschenrechner soll ein Tastenfeld erstellt werden, bei dem die 
jeweils gedrückte Zahl im Display erscheint. Hier das HTML: 






<html lang="en"> 


<head> 
<meta charset="UTF-8" /> 
<title>Calculator</title> 


<script srce="calculator.js” defer="defer"></script> 


<style type="text/css"> 
#display { 
width: 140px; 
+ 


#keyfield { 

width: 130px; 

padding: 5px; 

border: 1px solid black; 
} 


#keyfield > button { 
width: 40px; 
height: 49px; 


} 
</style> 
</head> 


<body> 

<p><input type="text" id="display"/></p> 

<div id="keyfield'"> 
<button>7</button> 
<button>8</button> 
<button>9</button> 
<button>4</button> 
<button>5</button> 
<button>6</button> 
<button>1</button> 
<button>2</button> 
<button>3</button> 





5.7 Kurz und knapp — on 83 








Codebeispiel 5.10 additional_fles/05/examples/calculator/calculator.htmi 


Im JS benötigen Sie (neben unseren Hilfsfunktionen) jetzt nur noch eine einzige 
Zeile Code, um die gewünschte Funktionalität zu realisieren: 


$$("#keyfield > button").on("click", 
e => $("#display").value += e.target.innerHTML); 


Die übergebene Funktion 
e => $("#display").value += e.target. innerHTML 


schreibt die jeweilige Zahl ins display. Statt diese Funktion auf jeden Button ein- 
zeln zu registrieren, genügt ein einziges on , um alle Buttons mit dem Event-Hand- 
ler auszustatten. 


Wenn Sie möchten, können Sie sogar mehrere .on -Aufrufe verketten: 


$$("#keyfield > button") 
.on("click", e => $("#display").value += e.target.innerHTML) 
„on("mousenter", e => console. log(e.target. innerHTML)); 
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5.8 Zusammenfassung 





blur ein Element den Fokus verliert. input, 
textarea 
change ein Anwender eine Änderung am Element input, 
bewirkt — z.B. durch Wählen einer Option select, 
innerhalb einer select-Box oder durch das textarea 


Bestätigen einer Checkbox. Im Gegensatz zum 
input-Event gilt: Bei einem input-Field oder 
einer textarea »feuert« dieses Event erst, 
nachdem das Feld seinen Fokus wieder verliert 





u (d.h. die Eingabe als abgeschlossen gilt). 
click en Anwender auf ein Element klickt (und wie- | button, 
der loslässt). Das cLick-Event repräsentiert img, body, 


den kompletten Vorgang: Drücken und Loslas- | p, div 
sen. Wenn Sie nur auf das Runterdrücken 
reagieren möchten, verwenden Sie 
mousedouwn, für nur das Loslassen mouseup. 


dbiclick ein Anwender auf einem Element einen Dop- button, 


pelklick ausführt. 





img, body 












ein Element den Fokus erhält. input, 


textarea 





sich der Fragmentbezeichner der URL ändert window 
(der Fragmentbezeichner ist der Teil, der nach 
dem #-Symbol folgt, inkl. Symbol). 


hashchange 














Tabelle 5.2 Ein Auswahl in der Praxis benötigter Browser-Events. Eine vollständige Liste finden Sie in der 
MDN Event reference”. 





30. https://developer.mozilla.org/en-US/docs/Web/Events 
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input der Inhalt eines input- oder textarea-kle- input, 
ments geändert wird. Im Gegensatz zu textarea 
change feuert dieser Event bei jeder Eingabe 
sofort. Unter jsfiddle.net/AtvtZ/ finden Sie 
einen guten Vergleich von input und change. 
keydown der Anwender eine Taste drückt. input, 
textarea 
keypress der Anwender eine Taste gedrückt hält. input, 
textarea 

















reset 


resize 





keyup der Anwender eine Taste loslässt. input, 
textarea 
mouseenter der Anwender den Mauszeiger über das Ele- button, 
ment bewegt — genauer: die Fläche des Ele- img, body, 
ments mit dem Mauszeiger betritt. p, div 
mouseleave der Anwender den Mauszeiger aus einem Ele- | button, 
ment herausbewegt. img, body, 
p, div 
mousemove sich der Mauszeiger über dem Element button, 
bewegt. img, body, 








scroll 






select 






submit 














Er | 











p, div 






ein Formular zurückgesetzt wird. form 













der Anwender die Größe des Browserfensters window 


verändert. 










innerhalb eines Elements (oder des Browser- 
fensters) gescrollt wird. 










der Anwender Text markiert. input, 


textarea, P 








ein Formular abgeschickt wird. 











Tabelle 5.2 Ein Auswahl in der Praxis benötigter Browser-Events. Eine vollständige Liste finden Sie in der 


MDN Event reference. 
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transitionend eine CSS-Transition beendet ist. img, div, p 





visibilitychange | Inhalt eines Elements sichtbar oder unsichtbar | img, div, p 


wird. 
Ir 


wheel | der Anwender am Rad dreht (wir meinen das window, 
wörtlich, nicht im übertragenen Sinn). Norma- | div 


lerweise ist es das Mausrad, aber es kann auch 

ein Trackball oder ein Touchpad sein. 
Tabelle 5.2 Ein Auswahl in der Praxis benötigter Browser-Events. Eine vollständige Liste finden Sie in der 
MDN Eventreference. 

































































Attrib: a Bedeu NG . 








altKey Gibt true bei gedrückter ALT-Taste zurück. 


button Nummer des gedrückten Buttons (0 bis 4) 

clientX X-Position des Mauszeigers im DOM 

clientY Y-Position des Mauszeigers im DOM 

ctrIKey Gibt true bei gedrückter CTRL-Taste zurück. 
metaKey Gibt true bei gedrückter META-Taste (Windows- bzw. 


Command-Taste) zurück. 


movementX | Relative Bewegung des Mauszeigers auf der X-Coordinate seit 
dem letzten mousemove 


movementY | Relative Bewegung des Mauszeigers auf der Y-Coordinate seit 
dem letzten mousemove 


screenX X-Position des Mauszeigers auf dem Bildschirm 











screenY Y-Position des Mauszeigers auf dem Bildschirm | 
shiftKey Gibt true bei gedrückter SHIFT-Taste zurück. 











Tabelle 5.3 MouseEvent: wichtige Attribute 
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altKey Gibt true bei gedrückter ALT-Taste zurück. 











code Codewert der gedrückten Taste, z.B. KeyA 
















ctrIKey Gibt true bei gedrückter CTRL-Taste zurück. 






Codewert der gedrückten Taste, z.B. a 








metaKey 


B 


shiftKey 


Gibt true bei gedrückter META-Taste (Windows- bzw. Command- 
Taste) zurück. 




















Gibt true bei gedrückter SHIFT-Taste zurück. 








Tabelle 5.4 KeyboardEvent: wichtige Attribute 


deltaX Scrollbewegung auf der X-Achse 


deltaY Scrollbewegung auf der Y-Achse 





Tabelle 5.5 WheelEvent: wichtige Attribute 
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currentTarget | Element, auf dem der aktuelle Eventhandler registriert ist (oft 
identisch mit target) 





target Element, das das Event ausgelöst hat (oft identisch mit 
currentTarget) 
timestamp Zeitpunkt, zu dem das Event ausgelöst wurde 








bu om lau ee a ee nt le m 


Tabelle 5.6 Event: wichtige Attribute (werden an alle speziellen Eventtypen, wie z.B. MouseEvent vererbt) 


5.9 Übungen 


Übung 10: Newsboard: Das geht noch besser 


Das Newsboard wartet noch auf das Vervollständigen seiner Funktionen. 
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Mehrere JS-Dateien 


verwenden 








Hi. Ich komme gerade von einem Meeting mit Carl Bier- 
see. Carl ist unser Consultant. Wir zahlen ihm eine 
Menge Geld dafür, dass er uns immer wieder sagt, wie 
toll unsere neue Plattform ist, und dass wir auf dem rich- 
tigen Weg sind. 





Heute hat er einen Blick auf die aktuelle Codebasis 
geworfen. Ich meine, Carl ist ein netter Kerl. Er wollte 
den Code nicht schlecht reden. Aber er hat uns doch 
klar zu verstehen gegeben, dass da nach oben noch 
ziemlich viel Luft ist. 


Ein Sache, die Sie auf jeden Fall verbessern sollten: den 
Code auf mehrere Dateien aufteilen. Er hat auch noch 
irgendwas von DRY und Rädern erzählt...oder so ähn- 
lich? 








Ob Karl sein Geld wirklich wert ist, darüber kann man sicherlich geteilter Meinung 
sein. In einem hat er jedoch recht: Ab einer gewissen Größe ist es sinnvoll, den 
Code auf mehrere Dateien aufzuteilen. Das bringt eine Reihe von Vorteilen: 


> bessere Übersicht 
> einfachere Wiederverwendung 


> erleichterte Teamarbeit 


Bessere Übersicht 


Je größer eine Datei wird, um so schwieriger ist es, innerhalb der Datei die richtige 
Codestelle zu finden. Wenn Sie Ihren Code thematisch aufteilen und die Dateien 
sinnvoll benennen, hilft das ungemein bei der Wartung und Weiterentwicklung. 


Stellen Sie sich vor, Sie sind Handwerker und suchen ein Werkzeug. In einem mög- 
lichen Szenario haben Sie einen Schreibtisch mit beschrifteten Schubladen. In 
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einem anderen haben Sie eine große Kiste, in die das Werkzeug reingekippt wurde. 
Wo würden Sie lieber suchen? 


Einfachere Wiederverwendung 


Wenn Sie Funktionen haben, die Sie an vielen Stellen in Ihrer Anwendung benö- 
tigen, ist es natürlich ungeschickt, das Rad immer wieder aufs Neue zu erfinden. 
Auch Copy&Paste von Funktionen ist keine besonders gute Lösung. Wir haben das 
zwar in der Vergangenheit immer wieder getan. Aber jetzt wollen wir das verbes- 
sern. 


Das Problem mit Copy&Paste zeigt sich spätestens dann, wenn Sie Ihren Code 
überarbeiten oder einen Bug ausmerzen. In dem Fall müssen Sie alle Kopien dieses 
Codefragments ebenfalls anpassen. Tun Sie das nicht, wird der Bug Sie verfolgen, 
oder es kommt zu Inkonsistenzen und überraschendem Verhalten. 


Besser ist: Sie lagern gemeinsamen Code aus und binden die gleiche Datei an allen 
benötigten Stellen ein. Dann vermeiden Sie Inkonsistenzen und müssen nicht den 
Klonen hinterjagen. 


22:02:22: 202] 


Das DRY-Prinzip 


DRY ist hier nicht wörtlich gemeint. Es steht für Don't Repeat Yourself — wie- 
derhole Dich nicht! Damit ist gemeint, dass Entwickler immer versuchen soll- 
ten, Redundanzen im Code zu vermeiden. 


Es geht nicht um simple Duplikate. Jedes Stück Wissen, jedes Konzept sollte 
genau eine autoritative Quelle, nur eine Repräsentation im Code haben 
(Venners 2003). Wenn sich ein Konzept ändert, sollte es im Code idealerweise 
nur eine Stelle geben, die Sie anpassen müssen. Manchmal ist es strittig, ob 
Code redundant ist oder nur zufällig gleich. 


Mittels Copy&Paste erzeugte Funktionen verstoßen meistens gegen das Dry- 
Prinzip. Vermeiden Sie Copy&Paste! 








EL a er ee ee ee 


Erleichterte Teamarbeit 


Falls Sie mit mehreren Leuten am gleichen Projekt arbeiten, ist es hilfreich, viele 
kleine statt wenige große Dateien zu haben. Je besser das Projekt aufgeteilt ist, 
desto weniger kommen Sie sich in die Quere. 
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Gute Versionierungssysteme (wie z.B. GIT°') helfen, Änderungen zusammenzufüh- 
ren, wenn mehrere Entwickler an der selben Datei arbeiten. Am einfachsten ist es 
aber immer noch, wenn das gar nicht nötig ist. 








Die empfohlenen Dateigröße liegt übrigens bei ca. 50 
bis 60 Zeilen Code. Das ist etwa die Codemenge, die 
Sie ohne zu scrollen auf eine Bildschirmseite bekom- 
men. Das ist natürlich nur eine Daumenregel — begrün- 
dete Ausnahmen gibt es immer wieder. 














6.1 Fröhliches Datei-Zerhacken 


Wie lässt sich das nun realisieren? Im Grunde ist es nicht schwierig, aber es gibt 
ein paar Stolperfallen. Oft ist die Reihenfolge, in der das HTML-Dokument die JS- 
Dateien einbindet, relevant. 


Das defer -Attribut sorgt dafür, dass das Laden der Scripte asynchron geschieht 
und die Scripte somit in (mehr oder weniger) zufälliger Reihenfolge eintrudeln. 
Glücklicherweise garantiert das defer -Attribut aber auch, dass die Scripte nach 
dem Laden in der Reihenfolge ausgeführt werden, diedas HTML-Dokument vor- 
gibt””. Damit unterscheidet es sich vom async -Attribut, das Scripte sofort nach 
dem Laden ausführt — völlig unabhängig von der Reihenfolge der script -Tags 
im HTML. 





srce="codel.js" defer="defer"></script> 
c="code2,js" defer="defer"></script> 
<script sre="code3.js" defer="defer"></script> 





Dennoch ist es aus Wartungsgründen unschön, wenn eine Änderung der Reihen- 
folge dazu führt, dass das Programm nicht mehr funktioniert. Mit ein wenig Diszi- 
plin können Sie das vermeiden. 





31. https://git-scm.com 
32. http://www.breck-mckye.com/blog/2014/04/document-loading-and-DOM-Iifecycle-events/ 
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Halten Sie einfach folgende Regeln ein: 


> Aufrufe von Funktionen erfolgen nur in der letzten eingebundenen Datei. 
Idealerweise gibt es nur einen einzigen Funktionsaufruf, z.B. init () oder 
zn). 

> Alle anderen Dateien definieren lediglich Variablen ( 1et ) oder — bevorzugt 
— Konstanten (const). 


Wenn Sie die beiden obigen Regeln befolgen, sind Sie bereits auf der sicheren 
Seite. Die Funktionalität ist komplett geladen, bevor ein Funktionsaufruf sie benö- 
tigt. Darüber hinaus gibt es Programmierrichtlinien, die Ihnen helfen, den Code 
sinnvoll zu organisieren. 





Programmierrichlinie 
> Ordnen Sie JS-Dateien von generisch nach spezifisch. 


Die letzte Datei, die Sie einbinden, sollte den speziellsten Code enthalten, der 
sich auf die aktuelle Anwendung bezieht. Die davor eingebundenen Dateien 
können allgemeinere Funktionen enthalten, die auch an anderer Stelle benö- 
tigt werden. 


> Laden Sie externe Bibliotheken und Fremdcode immer vor dem eigenen 


Code. “ 


Falls Sie mehrere unabhängige JS-Funktionalitäten in die gleiche HTML-Seite ein- 
binden, so betrachten Sie jede dieser Funktionalitäten als eine eigenständige 
Gruppe von Scripten. Die obigen Regeln gelten dann pro Gruppe. 








Beispiel 


Ei <script src="gruppei_allgemeine_bibliothekl.js" 
defer="defer"></script> 

Bl <seript src="gruppel_allgemeine_bibliothek2.js" 
defer="defer"></script> 

<script src="gruppel_eigene_funktionen.js” defer="defer »</seript- 
<script src="gruppel_eigene_datei_mit_init_aufruf. js“ 
defer="defer"></script> 

| <script src="gruppe2_allgemeine_bibliothek1.js" 
efer="defer"></script> 

<script src="gruppe2_allgemeine_bibliothek2.js" 
defer="defer"></script> 

<script src="gruppe2 _eigene_funktionen.js” defer deier =/ Il 
script src="gruppe2_eigene_datei_mit_init_aufruf.js" 
defer="defer"></script> 
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Damit Carl nun endlich Ruhe gibt (Sie wissen schon, er wird dafür bezahlt, dass er 
»Probleme« findet), teilen Sie das Newsboard am besten in drei Dateien auf. 


use strict"; 





const $ = document.querySelector.bind(document); 


Codebeispiel 6.1 additional_files/06/examples/newsboard/dom_helper.js 


Die Datei dom_helper.js enthält im Moment nur die $-Funktion. Wenn Sie weitere 
allgemeine Funktionen benötigen, können Sie sie hier ergänzen. 


"use strict"; 
_ 
© 





'const messages = [ 

“<h1>Tutoren streiken!!!</h1> 

<h2>Alle Einsendeaufgaben werden ab sofort mit ® Punkten 
bewertet</h2> 

<p>Überall dieselbe alte Leier. Das Layout ist fertig, der Text 
lässt auf sich warten. Damit das Layout nun nicht nackt im Raume 
steht und sich klein und leer vorkommt, springe ich ein: der 
Blindtext. Genau zu diesem Zwecke erschaffen, immer im Schatten 
meines großen Bruders »Lorem Ipsum«, freue ich mich jedes Mal, wenn 
sie ein paar Zeilen lesen.</p> 

<p class="newsboard_footer">am 25.09.2015 von K. Einer</p>‘ 








’ 


“<hl>Wahnsinn!</h1> 

<h2>Wie ich mit einer dämlichen Idee ein Vermögen machte</h2> 
<p>Polyfon zwitschernd aßen Mäxchens Vögel Rüben, Joghurt und 
Quark. "Fix, Schwyz! " quäkt Jürgen blöd vom Paß. Victor jagt zwölf 
Boxkämpfer quer über den großen Sylter Deich. Falsches Üben von 
Xylophonmusik quält jeden größeren Zwerg. Heizölrückstoßabdämpfung. 
Zwei flinke Boxer jagen die quirlige Eva und ihren Mops durch 

Sylt. </p> 

<p class="newsboard_footer">am 13.08.2015 von Dr. B. 
Lödmann</p>" . 


“<h1>Prokrastination?</h1> 

<h2>Wie oft hörst du dich selbst sagen: „Nein, ich hab’s noch 
nicht erledigt; ich habe es vor!“</h2> 

<p>Denn esse est percipi - Sein ist wahrgenommen werden. Und 
weil Sie nun schon die Güte haben, mich ein paar weitere Sätze lang 
zu begleiten, möchte ich diese Gelegenheit nutzen, Ihnen nicht nur 
als Lückenfüller zu dienen, sondern auf etwas hinzuweisen, das es 
benso verdient wahrgenommen zu werden: Webstandards nämlich.</p> 
<p>Sehen Sie, Webstandards sind das Regelwerk, auf dem Webseiten 
aufbauen. So gibt es Regeln für HTML, CSS, JavaScript oder auch XML; 
Worte, die Sie vielleicht schon einmal von Ihrem Entwickler gehört 
haben. Diese Standards sorgen dafür, dass alle Beteiligten aus einer 
Webseite den größten Nutzen ziehen. Im Gegensatz zu früheren 
Webseiten müssen wir zum Beispiel nicht mehr zwei verschiedene 
Webseiten für den Internet Explorer und einen anderen Browser 
programmieren.</p> 

<p class="newsboard_footer">am 02.06.2015 von A. Meisenbär</p>‘ 














Codebeispiel 6.2 additional_fles/06/examples/newsboard/messages.js 
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Die Datei message.js enthält die Nachrichten selbst. Falls jemand weitere Nachrich- 
ten ergänzt, muss er nur noch diese Datei ändern. Das vermindert die Wahrschein- 
lichkeit, dass sich nachträglich Fehler in den eigentlichen Anwendungscode ein- 
schleichen. 


'use strict"; 





const nit Lt 
showFirstMessage(); 
$(" [title=next]").addEventlListener("click", nextMessage); 
$(" [title=prev]").addEventListener("click", prevMessage); 
5 


const showFirstMessage = () => showMessageByNumber (1); 


const nextMessage = e => { 

showMessageByNumber (currentMessageNumber += 1); 
e.preventDefault(); 

B 
const prevMessage = e > { 
showMessageByNumber(currentMessageNumber -= 1); 
e.preventDefault(); 

}; 


const showMessageByNumber = messageNumber => 
$(",newsboard_content").innerHTML = messages [messageNumber - 


let currentMessageNumber = 1; 

init(); 

Codebeispiel 6.3 additional_files/06/examples/newsboard/newsboard.js 
Folgender Code bindet die drei Dateien ein: 


<head> 

<script src="dom_helper.js” defer="defer"></script> 
<script src="messages.js" defer="defer"></script> 
<script sre="newsboard.js" defer="defer"></script> 


'</head> 


2 a0. 
a 


Codebeispiel 6.4 newsboard.html 


6.2 Der Terror der globalen Verschmutzung 


Leider gibt es ein weiteres Hindernis. Wenn Sie auf Variablen und Konstanten 
aus einer anderen Datei zugreifen möchten, dürfen Sie diese nicht in einen Block 
packen. Ein äußerer Block sorgt ja gerade dafür, dass die Namen der Variablen 
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(bzw. Konstanten) diesen nicht verlassen und damit den Sichtbarkeitsbereich der 
Datei überschreiten. 


Das kann aber unweigerlich zu den Problemen führen, vor denen gerade der Block 
schützen sollte: der Verschmutzung des globalen Namensraums. 


Binden Sie viele Dateien ein, kann es passieren, dass diese die gleichen Namen ver- 
wenden. In dem Fall kommt es zu einem Namenskonflikt und dadurch zu Fehlern. 
Vor allem, wenn Sie viele 3rd-Party-Scripts (z.B. Youtube, Google-Analytics) oder 
externe Bibliotheken einbinden, kann es schnell passieren, dass Sie die Kontrolle 
verlieren. Dann steht Ihnen eine aufwendige Fehlersuche bevor. 


Das klingt möglicherweise erst einmal nach einer eher unwahrscheinlichen Situa- 
tion. Wir können Ihnen aber versichern, dass das ein sehr reales Problem ist. Es ist 
nicht so selten, wie Sie vielleicht denken! 


Versuchen Sie deswegen die Anzahl der globalen Variablen und Konstanten mög- 
lichst klein zu halten. 


EEE 
Ein kleines Experiment 


Suchen Sie sich einen beliebigen erfahrenen JS-Ent- 
wickler in Ihrer Nachbarschaft (falls nicht vorhanden, 
Radius bitte ausdehnen). Bitten Sie diesen Entwickler, 
eine Anekdote zu Thema Namenskonflikt zum Besten zu 
geben. Vermutlich wird er Ihnen eine haarsträubende 
Geschichte erzählen. 








Kampf gegen die globale Verschmutzung 


Tatsächlich gibt es Auswege aus dem Dilemma der glo- 
balen Namensraumverschutzung. Die entsprechenden 
Prinzipien sprengen aber ein wenig den Rahmen dieses 
Buches. Falls es Sie interessiert, finden Sie hier ein paar 
weiterführende Infos: 


>» Modulpattern & revealing Modulepattern?® (Osmani ) 


» ES6-Imports mit webpack und Babel”* (Rauschmayer 
2016) 


>» ES6-Imports mit dem ES6-module-loader”® 
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6.3 Kein bisschen verstaubte Bibliotheken 


Im Zusammenhang mit Programmiersprachen ist eine Bibliothek (engl. library — 
abgekürzt lib) eine Sammlung von Code (z.B. in Form von Funktionen), den Sie in 
Ihre eigenen Programme einbinden können. Der Code kann dabei unterschiedlich 
spezialisiert oder allgemein gehalten sein. Normalerweise ist er aber eher gene- 
risch und kann in vielen verschiedenen Programmen verwendet werden. 


Im Grunde haben Sie in dieser Lektion schon eine Bibliothek zusammengestellt — 
vielleicht nicht aus dicken Wälzern und alten Scharteken, aber in Form einer Datei. 
Genau! Die Datei dom_helper.js ist bereits eine kleine Bibliothek. 


‘use strict"; 






const $ = document.querySelector.bind(document); 


;, 


Codebeispiel 6.5 additional_files/06/examples/newsboard/dom_helper.js 


Zugegeben, sie enthält momentan nur eine Funktion — die Funktion $. Eine 
Bibliothek mit nur einem Buch würden Sie wohl kaum eine Bibliothek nennen. Für 
nur eine einzige Funktion wäre es auch in der Praxis ein wenig übertrieben, eine 
Bibliothek einzubinden. Tatsächlich haben wir aber bereits eine Reihe von Funktio- 
nen und Erweiterungen, die wir häufiger benötigen. 


Tragen Sie diese Funktionen in die Datei dom_helperjs ein, und Sie können in 
Zukunft auf ständiges Copy&Paste dieser Funktionen verzichten. 


‘use strict"; 





onst $ = document.querySelector.bind(document); 
onst $$ = document. querySelectorAll.bind(document); 


odeList.prototype.__proto__ = Array.prototype; 
TMLCollection.prototype.__proto__ = Array.prototype; 


Node.prototype.on = function(name, fn) { 





33: https://addyosmani.com/resources/essentialjsdesignpatterns/book/#modulepatternjavascript 
34. https://leanpub.com/setting-up-es6/read#sec_webpack-babel 
35. https://github.com/ModuleLoader/es6-module-loader 
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this.addEventListener(name, fn); 
return this; 


5 





A NodeList.prototype.on = NodeList.prototype.addEventListener = 
function(name, fn) { 

this. forEach(elem => elem.on(name, fn)); 

return this; 








5b 
Codebeispiel 6.6 additional _fles/lib/dom_helper.js 


Im Begleitmaterial finden Sie die Datei bereits im /1ib -Verzeichnis. 


Falls Sie einen Fehler finden, müssen Sie ihn auch nur einmal beheben und nicht in 
allen durch Copy&Paste entstandenen Kopien. 


Sharing is caring: Einbinden fremder Bibliotheken 


Das Gute ist, dass bereits viele JS-Entwickler Bibliotheken zu den verschiedensten 
Themen angelegt und unter einer OpenSource-Lizenz veröffentlicht haben. Solche 
Bibliotheken können Sie bei Bedarf einbinden und müssen dadurch nicht alles 
selbst entwickeln. 





Package Manager 


Das Einbinden und Wiederverwenden von fremden 
Bibliotheken gelingt am einfachsten mit Hilfe eines 
Package-Managers. Das Verwenden eines solchen 
Managers ist aber kein Thema dieses Grundlagenbuchs. 
Falls Sie mehr darüber wissen möchten, finden Sie unter 
diesen URLs zwei bekannte Package-Manager für JS. 





>» https://www.npmjs.com 


> jspm.io 
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Attribute: Erkennen, Ändern 
und Manpulieren 
ausdrücklich erlaubt 





Wir hätten da gerne noch eine Verbesserung für den 
Newsbereich. Es ist wirklich nur eine Kleinigkeit. 


Zur besseren Visualisierung haben wir uns vorgestellt, 
dass ein Fortschrittsbalken anzeigt, wie viele News der 
Anwender schon gelesen hat und wie viele noch kom- 
men. Das können Sie doch bestimmt heute noch ein- 
bauen, oder? 





Wahnsinn! 











En Eee ee ne 


Tja, mal sehen, ob Sie das heute fertig bekommen. Bevor Sie sich aber der Aufgabe 
im Ganzen widmen können, möchten wir Ihnen zeigen, wie Sie einen Fortschritts- 
balken (engl. progress bar) mit JS ansprechen. Einen Fortschrittsbalken können Sie 
mit dem HTML5-Element progress erzeugen: 


<progress value="3" max="10"></progress> 
Codebeispiel 7.1 das HTML-Element progress 


Das Attribut max gibt den maximalen Wert des Balkens an, bei dem er am Ende 
angelangt ist. Mit value ist der aktuelle Wert gemeint. Wenn Sie also gerade 
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Nachricht 3 von 10 anzeigen möchten, so müssen Sie max auf 10 und value auf 
3 setzen, wie in Codebeispiel 7.1. 


Natürlich benötigen Sie jetzt die Möglichkeit, den Wert des value -Attributs mit 
JavaScript zu ändern. 


_<!DOCTYPE html> 






<meta charset="utf-8" /> 
<title>Progressbar</title> 


progress id="messages_progress" value="3" max="10"></progress> 
 </body> 


. | </html> 
Codebeispiel 7.2 additional_fles/07/examples/progressbar.html 


Öffnen Sie die Datei zu Codebeispiel 7.2 im Browser und greifen Sie auf das 
Element-Objekt des Balkens anhand seiner id messages progress ZU: 


$('#messages_progress') 


Alle HTML-Element-Objekte bieten die Methoden getAttribute und 
setAttribute zum Auslesen und Verändern von Attributwerten an. 


Mittels 
$('#messages_progress').getAttribute('value') 

erhalten Sie den aktuellen Wert 3 des value -Attributs zurück und mittels 
$('#messages_progress').setAttribute('value', 8) 


können Sie den Wert auf 8 ändern. 


Element-Objekte verfügen außerdem über die Eigenschaft attributes, die eine 
Liste aller verfügbaren Attribute zurückliefert: 


$('#messages_progress').attributes // => NamedNodeMap [ max="20", 
value="7", id="messages_progress" ] 


Der Rückgabewert ist eine sogenannte NamedNodeMap — ein Objekt, das alle 
Attribute und deren Werte enthält. 
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7.1 IDL-Attribut vs. Content-Attribut 


Generell können Sie mit den beiden Methoden getAttribute und 
setAttribute nahezu beliebige Attribute auf HTML-Elementen auslesen und 
ändern. In vielen Fällen stellt das DOM die Attribute aber auch direkt als JS-Pro- 
perties auf dem HTML-Element-Objekt zur Verfügung. So können Sie z.B. den Wert 
des Balkens auch direkt mit 


$('#messages_progress').value 
auslesen bzw. mit 
$('#messages_progress').value = 8 


auf 8 ändern. Die Attribute, die Sie mit den Zugriffs-Methoden auslesen, heißen 
Content-Attribute und die, die Sie direkt über Eigenschaften ansprechen, werden 
IDL-Attribute genannt. In den meisten Fällen macht es keinen Unterschied, welche 
Art von Attribut Sie verwenden. Die IDL-Attribute greifen auf die zugrundeliegen- 
den Content-Attribute zu. 


Einen kleinen Unterschied stellt der verwendete Datentyp dar. Content-Attribute 
sind immer vom Datentyp string. 


typeof $('#messages_progress').getAttribute('value') // = string 


IDL-Attribute können dagegen unterschiedliche Datentypen haben. So ist z.B. der 
value des progress -Elementes vom Typ number. 


typeof $('#messages_progress').value // => number 


7.2 Es lebe der Fortschritt(sbalken)! 


Jetzt, wo Sie wissen, wie es funktioniert, müssen Sie den Fortschrittsbalken nur 
noch anbinden. Das Schöne dabei ist, dass Sie die ungeliebte Variable 
currentMessageNumber dabei loswerden. Statt in der Variable können Sie den 
Wert direkt im value -Attribut von progress speichern. 


Zum einfacheren Zugriff definieren Sie zunächst eine Funktion progressbar , die 
Ihnen das progressbar -Element zurückliefert. 


const progressbar = () => $("#messages_progress"); 
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Somit können Sie nun den aktuellen Wert des Fortschrittsbalken 
(progressbar () .value) mittels +=1 und -=1 verändern. 


= 


 const nextMessage = e => { 
showMessageByNumber (progressbar().value += 1); 
e,preventDefault(); 
}; 
const prevMessage = e => { 
showMessageByNumber (progressbar().value -—= 1); 
e.preventDefault(); 


’ 







Ein kleines Refactoring 


Zur Verbesserung der Lesbarkeit können Sie den Code, der den value der Fort- 
schrittsbalken verändert, noch in eigene Funktionen auslagern: 


| const nextMessage = e => { 

-  showMessageByNumber(incCurrentMessageNumber()); 
e.preventDefault(); 

bb 

_ const prevMessage = e => { 

showMessageByNumber (decCurrentMessageNumber()); 

e.preventDefault(); 











h 
const incCurrentMessageNumber 


=> progressbar().value += 1; 
onst decCurrentMessageNumber 


=> progressbar().value -= 1; 


Probieren Sie es aus. Hurra — der Fortschrittsbalken funktioniert! 


Initalisierung in progress 


Um flexibel auf unterschiedlich große messages -Arrays reagieren zu können, soll- 
ten Sie den Fortschrittsbalken noch mit den richtigen Werten initialisieren. 


_ const initProgressbar = () => { 
progressbar().max = messages. length; 
progressbar().value = 1; 


’ 






initProgressbar können Sie dann in der init -Hauptfunktion aufrufen. Fügen 


Sie versuchshalber ein paar neue Nachrichten im Array hinzu. Sie sehen, dass der 
Fortschrittsbalken sich sofort dynamisch anpasst. 


73 Achtung! — boolesche Attribute 


Bei booleschen Attributen müssen Sie etwas aufpassen. Betrachten Sie beispiels- 
weise die Eigenschaft disabled. Diese Eigenschaft gibt es unter anderem auf 
den Elementen button, input, option, select Und textarea. 
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button disabled="disabled">Not today, sorrys/button> 
<button>Click Me -— I'm enabled</button> 





Mit disabled="disabled" können Sie den Button deaktiveren. Er erscheint aus- 
gegraut und lässt sich nicht mehr anklicken. 


4 Click Me - m enabled | 





‚Abb. 7.1 nicht-aktiver und aktiver Button 


Das IDL-Attribut hat den Typ boolean: 
typeof $('button').disabled // => boolean 


Sie können es mittels 


$('button').disabled = true 
bzw. 
$('button').disabled = false 


umschalten. Verwenden Sie Codebeispiel 7.3 und die Konsole, um es auszuprobie- 
ren. 


k|<!DOCTYPE html> 
<html lang="en"> 


<head> 
<meta charset="utf-8" /> 
<title>Buttons</title> 
</head> 


<body> 
<button disabled="disabled">Not today, sorry</button> 
<button>Click Me - I'm enabled</button> 

</body> 


</html> 





Codebeispiel 7.3 additional_files/07/examples/button.html 


Arbeiten Sie jedoch mit den Content-Attributen, ist die korrekte Schreibweise zum 
Ausgrauen des Buttons $('button') .setAttribute('disabled', 
disabled"). Noch verrückter wird es, wenn Sie versuchen, den Button wieder 
zu aktivieren: Ein naives $("button') .setAttribute("disabled', '') hilft 
nicht. 
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Tatsächlich würde es den Wert von disabled auch auf true setzen — letzt- 
endlich geht es nämlich bei booleschen Attributen nur um die Frage, ob das 
Attribut vorhanden ist oder nicht. Der tatsächliche String-Wert spielt keine Rolle. 


Wenn Sie das Content-Attribut wieder loswerden möchten, müssen Sie es mit 
removeAttribute entfernen: 


$('button').removeAttribute( 'disabled'); 


7.4 Auf die Fragestellung kommt es an — mit dem 
value-Attribut 


Betrachten Sie Codebeispiel 7.4. Das Eingabefeld hat den vorgegebenen Text hello 
im value -Attribut. 


!IDOCTYPE html> 
html lang="en"> 


'<head> 
<meta charset="utf-8" /> 
<title>Input</title> 





Codebeispiel 7.4 additional_hles/07/examples/input.html 


Solange Sie den Text nicht ändern, sind IDL- und Content-Attribut identisch. 





$("input').value // => "hello" 
..$('"input').getAttribute( 'value') // => "hello" 


Geben Sie nun einen neuen Text in das Feld ein, z.B. world, und fragen Sie den Wert 
erneut über JS ab: 





/$("input').value // => "world" 
.. $("input').getAttribute( 'value') // => "hello" 
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a 
un 
“: 
& 
8 





De 


» Stl’input’}.valıe 
st’ input’ }.getAttribitet 'value’} // = 


Das IDL-Attribut reflektiert die Änderung und liefert somit die aktuelle Eingabe 
(hier: "world" ). Das Content-Attribut bezieht sich aber nach wie vor auf den Wert 
aus dem HTML-Quellcode (hier: "hello" ). Dieser Wert kann hier auch als Stan- 
dardwert bezeichnet werden, da er für den Anwender bereits vorab im Input-Ele- 
ment vorgegeben ist. 





Meine Empfehlung 


Verwenden Sie immer die IDL-Attribute — außer Sie 
benötigen gezielt einen Originalwert aus dem HTML- 
Code! 











Der Zugriff auf die IDL-Attribute ist aus mehreren Gründen vorzuziehen: 


> Sie erhalten einen genaueren Datentyp und nicht nur String. 
> Sie erhalten aktuelle, möglicherweise geänderte Werte (z.B. durch Eingaben). 


> Das Verhalten ist konsistenter. Sie müssen weniger Sonderfälle beachten. 
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7,5 Zusammenfassung 






Alternativer Text, z.B. falls ein Bild nicht dar- 
gestellt werden kann. 


area, img, 












input 








checked 





Gibt an, ob ein Radiobutton gewählt oder 
eine Checkbox angehakt ist. 





input 
























cols textarea Anzahl der Spalten 







disabled button, Gibt an, ob ein Element deaktiviert ist. 
input, 
option, 
select, 
textarea 

href a, link Die URL einer verlinkten Ressource 

max progress, Der Maximalwert — bei input-Elementen ist 
input das nur für type="number" und 


type="range" sinnvoll. 


maxlength | input, Maximal erlaubte Zeichen in einem Element 
textarea 
SEHEN! Vüas:2>: SEHE EENEEEENENEEEBE EEE EEE EEE 
min input Der Minimalwert — bei input-Elementen ist 


das nur für type="number" und 
type="range" sinnvoll. 
TEE ESSESEESEESSEESSSSSSSEEEESSEEEEEEEEEEEEEEEEEEEEE 
multiple input, Erlaubt bei true mehrere Eingaben für 
select input type="email" oder input 
type="file".Bei select können mit strg/ 


cmd mehrere Optionen gewählt werden. 


Tabelle 7.1 Ein Auswahl von Attributen, die in der Praxis öfter mit JS angesprochen werden. Eine 
vollständige Liste aller Attribute finden Sie in der MDN Attribut reference®®. 




















36. https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes 
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name button, Name des Elements. Dieses Attribut wird 

form, hauptsächlich für serverseitige Anwendun- 
fieldset, gen zur Identifizierung genutzt. 
input, 
select, 
textarea 

| placeholder | input, Voreingestellter Text, der dem Anwender 
textarea einen Hinweis zu den erwarteten Eingaben 


gibt. 





rel 


required 


rows 
selected 


size 


src 


start 


step 








readonly 1 input, 


textarea 


a, link 


input, 
select, 
textarea 
textarea 


option 


select 


img 


ol 


input 





Gibt an, ob ein Element bearbeitet werden 
kann. 


Definiert die Beziehung zwischen dem Ziel- 
und dem Link-Objekt. Kann auch für eigene 
Beziehungstypen verwendet werden, z.B. 
interne Links für eine JS-Bildergalerie. 


Gibt an, ob ein Element ein Pflichtfeld dar- 
stellt. 

Anzahl der Zeilen 

Gibt an, ob eine option selektiert ist. 


Anzahl der sichtbaren Optionen bei einer 
select-BoxX 


URL der Bilddatei 


Definiert die Startnummer einer Liste, wenn 
etwas anderes als 1 gewünscht ist. 


Die Schrittweite — bei input-Elementen ist 
das nur für type="number" und 
type="range" sinnvoll. 


Tabelle 7.1 Ein Auswahl von Attributen, die in der Praxis öfter mit JS angesprochen werden. Eine 
vollständige Liste aller Attribute finden Sie in der MDN Attribut reference. 
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tabindex auf allen Ele- Überschreibt die herkömmliche Reihenfolge 
menten mög- der angesteuerten (Formular-)Elemente mit 
lich Hilfe der Tab-Taste. 


auf allen Ele- Kleine Text-Box (Tooltip), die beim »Hover« 
menten mög- angezeigt wird. 
lich 


button, Typ des Elements 
input 


button, Wert des Elements 
option, 

input, 

progress 





Tabelle 7.1 Ein Auswahl von Attributen, die in der Praxis öfter mit JS angesprochen werden. Eine 
vollständige Liste aller Attribute finden Sie in der MDN Attribut reference. 


7.6 Übungen 
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wsboard: Jetzt ist taber Schluss! _ 












neuen re de Nevnbaanks a sch fast fertig. eben, 
_ ist aber, dass die Vorwärts- und Rückwärts- Buttons auch aktiv sind, wenn 

zn ‚ keine vorige bzw. nächste Nachricht mehr oe Dies führt zu einem a 
unschön n Fehler. 


_ = Machen Sie die Links (a-Element), die der Steuerung der Newsboards 
dienen, zu echten Buttons (button-Element). Damit lassen sie en im 
_ ‚ Bedarfsfall deaktivieren. 


2. Sorgen Sie dafür, dass die Vor- und Rückwärts-Buttons jeweils deakti- 
viert werden, sobald der Anwender am Anfang bzw. Ende ger Nachrich- 
tenliste angekommen ist. 


2. Auch die Buttons, die den Anwender zur ersten bzw. zur letzten Nach- 
richt führen, sollen deaktiviert sein, sobald sich der Anwender bei der 
ersten bzw. letzten Nachricht befindet. 





Übung 14: Die Rückkehr der Lauflichter: Teil 1 - Chasing Lights 


Abb. 7.2 Photo: Axel Kuhlmann?” 
Lizenz: CC-BY-2.0°® 


Lichterketten waren einmal der letzte Schrei (und sind es um Weihnachten 
oft immer noch). Lauflicht-Funktion verfügen. 


Genau so eine könnten Sie jetzt mal programmieren. Die folgende, einfache 
HTML-Vorlage finden Sie auch im Übungsmaterial: 








37. https://www.flickr.com/photos/abbilder/4921660612/ 
38. https://creativecommons.org/licenses/by/2.0/ 
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Eine Frage des Stils: Das Style- 


Objekt 











Hey, wir haben gerade ein neue hippe Geschäftsidee 
gelaunched: Es gibt jetzt Nerd-Produkte für Senioren. 
Ich bin sicher, das wird der Renner! 


Ich habe aber schon von meiner Oma und einigen älte- 
ren Herrschaften gehört, dass ihnen die Schriftgröße auf 
unserer Seite zu klein ist. Wir werden sie natürlich 
grundsätzlich vergrößern. Die Bedürfnisse sind nur lei- 
der recht unterschiedlich. Deswegen wäre es gut, wenn 
Sie ein paar Buttons auf die Seite werfen könnten, mit 
denen sich die Schriftgröße wählen lässt: 


> small (14px) 

> normal (16px) 

> large (24px) 

> very large (36px) 

> »Mann, bin ich blind« (72px) 

> ultra enormously extraordinary extremly large 
(200px) 


Naja, vielleicht lassen Sie die letzten beiden erst einmal 
weg ... 


VeryLarge Large | Normal ; Small 


Lorem ipsum dolor sit 
error. Possimus in reic 
doloremque, facere ali 


Anıcrimnec fnoiat ea can 
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Sie könnten auch hier wieder CSS-Klassen für die verschiedenen Schriftgrößen 
anlegen, das wäre in diesem Fall aber übertrieben. Einfacher ist es, Sie manipulie- 
ren die Schriftgröße direkt. 


html lang="en"> 


head> 

<meta charset="utf-8" /> 

<title>Font Size</title> 

script Src="../../../lib/dom_helper.js" defer="defer"></script> 
<script src="font_size_refactored.js" defer="defer"></script> 


<button id="very_big">Very Large<s/button> 

<button id="big">Large</button> 

<button id="normal”>Normal</button> 

<button id="small">Small<s/button> 

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. 

Nam, error. Possimus in reiciendis quo numquam assumenda, deleniti 
doloremque, facere alias odio animi est aliquam delectus corrupti 

nt fugiat ea commodi.</p> 








 «/html> 


Codebeispiel 8.1 additional_files/08/examples/font_size_big_small/font_size.html 


Das DOM stellt dafür die Eigenschaft style auf den HTML-Element-Objekten zur 
Verfügung. Öffnen Sie Codebeispiel 8.1 im Browser. Geben Sie $ ( 'p').style in 
die Konsole ein —Sie erhalten ein CssStyleDeclaration -Objekt zurück. Die- 
ses Objekt stellt alle verfügbaren CSS-Eigenschaften als JS-Eigenschaften zur Ver- 
fügung, beispielsweise die Schriftfarbe color . Geben Sie ein: 


$('p').style.color = 'red' 


Der Text des ersten Absatzes (p-Tag) wird nun rot. Die Schriftgröße können Sie 
genauso verändern. Dabei gibt es nur eine kleine Spitzfindigkeit zu beachten. 


TODO CE: Screenshot 


Simsala-Bim: Du bist jetzt ein Kamel 


In CSS haben viele Eigenschaften einen Bindestrich im Eigenschaftsnamen, so 
auch font-size. Das ist für JS-Bezeichner aber nicht zulässig. Deswegen müssen 
Sie die Schreibweise stattdessen in camelCase umwandeln: Aus font-size wird 
fontSize. Um die Schriftgröße zu vergrößern, können Sie eingeben: 
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$('p').style.fontSize = '36px' 


Vergessen Sie die Einheit (hier: px ) nicht, sonst ignoriert der Browser die Angabe! 


Jetzt müssen Sie die Anweisungen nur noch an das click -Event des jeweiligen 
Buttons binden, z.B. so für den Big-Button: 


$("#big").on("click", () => $("p").style.fontSize = "36px"); 


Codebeispiel 8.2 zeigt den vollständigen Code für alle Buttons. 






_ruse strict"; 


eonst nit = () = t 

$("#very_big").on("click", () => $("p").style.fontSize = 
"Z6px"); 
8 $("#big").on("click", () = $("p").style.fontSize = "24px"); 
$("#normal").on("click", () => $("p").style. fontSize = "16px"); 
$("#small").on("click", () => $("p").style.fontSize = "14px"); 





}; 
\ init(); 

a) 

Codebeispiel 8.2 additional_files/08/examples/font_size_big_small/font_size.js 


Das übliche Refactoring — hier das Entfernen von Redundanzen und Magic Num- 
bers — führt zu folgendem Code. 






EEE 


"use strict"; 


const SMALL = 14; 
const NORMAL = 16; 
const BIG = 24; 
const VERY_BIG = 36; 


const init: = (): 71T 

$("#very_big").on("click", () => setFontSizeTo(VERY_BIG)); 
$("#big") onl@öctick” Hl) => setFontSizeTo(BIG)); 
$("#normal") „on("click", () => setFontSizeTo(NORMAL)); 
$("#small") ‚on("click", () => setFontSizeTo(SMALL)); 

% 


const setFontSizeTo = size => $("p").style. fontSize = size + 
init(); 


Codebeispiel 8.3 additional _files/08/examples/font_size_big_small/font_size_refactored.js 
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Oh hmmja ja: — also, Sie io as ja schon toll umge- 





mal ändern. Wir haben Umfragen ei unseren Kunden 

_ durchgeführt und festgestellt, dass sie lieber auf»+« 
und »-«-Buttons zur a der en a 

würden. 


Lorem ipsum dolor 
Nam, error. Possimu 


aceımenda delanıtı 











Kein Problem für Sie — hier ist das neue HTML-Dokument: 


!DOCTYPE html> 
html lang="en"> 


head> 

<meta charset="utf-8" /> 

<title>Font Size</title> 

<script src="../../../lib/dom_helper.js" defer="defer"></script> 
<script sre="font_size.js" defer="defer"></script> 

/head> 


body> 


<button id="inc">+</button> 

<button id="dec">-</button> 

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. 

NET, error. Possimus in reiciendis quo numquam assumenda, deleniti 
doloremque, facere alias odio animi est aliquam delectus corrupti 

ducimus fugiat ea commodi.</p> 











Codebeispiel 8.4 additional_files/08/examples/font_size_inc_dec_non_functional/font_size.html 


Registrieren Sie zunächst wieder die Click-Events auf den Buttons. Sinnvoll ist es, 
die Funktionen zum Vergrößern (engl. increase) und Verkleinern (engl. decrease) 
der Schriftgröße entsprechend incFontSize und decFontSize zu nennen. 
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Es 


const init= ()>Ä1 

$("#inc").addEventListener("click", incFontSize); 
$("#dec").addEventListener("click", decFontSize); 
© 


bb 


Legen Sie die beiden Funktionen an — erst einmal incFontSize. 


Die Idee ist ganz einfach. Sie greifen auf die aktuelle Schriftgröße zu. Wir tun ein- 
fach mal so, als ob es bereits eine Funktion namens currentFontsize gäbe, die 
uns die Schriftgröße als number zurückliefert. Zu diesem Wert addieren Sie 5.Das 
Ergebnis ist die neue fontSize, die Sie wieder dem Style-Objekt zuweisen. 


const incFontSize = () => setFontSizeTo(currentFontSize() + 5); 


Mit dem Verkleinern verfahren Sie analog, indem Sie 5 von der aktuellen Schrift- 
größe (currentFontSize ) abziehen: 


El const decFontSize = () => setFontSizeTo(currentFontSize() - 5); 


Damit das auch funktioniert, müssen Sie nur noch die Funktion 
currentFontSize implementieren. Hier ein erster Versuch 





onst currentFontSize = () => parseInt($("p").style.fontSize); 


Die Idee ist hier, die bestehende fontSize auszulesen und per parseInt eine 
Zahl ohne das "px" am Ende zu extrahieren. 


parselnt oder das Geheimnis der verschwundenen Pixel 


Am besten probieren Sie erst einmal parseInt direkt in der Konsole aus. Die 
Funktion ist hier außerordentlich nützlich, da sie Ihnen erlaubt, das "px" am Ende 
der fontsize loszuwerden. Geben Sie z.B. "40px" - 5 in der Konsole ein, 
erhalten Sie nan (Not a Number) als Rückgabewert. Der String "40px" ist nun 
mal keine Zahl, damit lässt sich leider nicht rechnen. 


Mittels parseInt können Sie die Zahl extrahieren. Die Funktion nimmt einen 
String entgegen und parst diesen, soweit sie gültige Zeichen (d.h. Ziffern) findet. 
Geben Sie in die Konsole ein: 


parseInt("40px") 


Sie erhalten 40 als Number zurück — damit können Sie rechnen. 


Das erste Problem ist bereits gelöst. Betrachten Sie nun nochmal die Implementie- 
rung von currentFontsSize: 
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I const ceurrentFontSize = () => parseInt($("p").style.fontSize); 


Leider funktioniert der Code immer noch nicht! Woran liegt das? 


Wirklich eine Frage des Stils? 


Lassen Sie uns ein kleines Experiment machen. Versuchen Sie mal, einen bestehen- 
den Style auszulesen. Laden Sie die Seite neu und öffnen Sie die JS-Konsole. Geben 
Sie jetzt das Style-Objekt aus, indem Sie folgende Zeile in Konsole eintippen: 


console. log($('p').style) 


Sie sehen, das Style-Objekt hat den Typ CssStyleDeclaration. Klappen Sie es 
aus und zeigen Sie es an. 


$ 


Lorem ipsum dolor sit amet, consectetur adipisieing elit. Nam, error. Possimus in reiciendis quo numquam assumenda, deleniti doloremque, 
facere alias odio animi est aliquam delectus corrupti ducimus fugiat ea commodi. 





u © Inspector . : ___® Debugger {} StyleEditor  & Performance = Network BB Do a2 x 
® Net “= cs > JS = Bseaiy © | Q font = 


u» console. log(${'p').style) 
CSs2Properties { } 








Abb. 8.1 fontSize-Eigenschaft im style -Objekt mit Leerstring 


Es hat eine Menge Eigenschaften. Die fontSize ist auch dabei. Das Erstaunliche 
ist aber, dass diese Eigenschaft statt einer tatsächlichen FontSize wie "16px" nur 
den leeren String "" enthält. 


Weisen Sie der fontSize versuchsweise den Wert "40px" zu — wieder in der Kon- 
sole. 
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$("p").style.fontSize = "40px"; 
Geben Sie es erneut aus. 
console.log($('p').style); 


Dieses Mal finden Sie die "40px" tatsächlich als Wert der fontSize im Style- 
Objekt. 


Lorem ipsum dolor sit amet, consectetur adipisicing 
elit. Nam, error. Possimus in reiciendis quo numquam 
assumenda, deleniti doloremque, facere alias odio 


& {3} Inspector = @ Debugger {} Style Editor 3 Performance 2 Network Ka dk 2 28* 





@Secuity 2 © tondl & 





“= Net = 6 





I» st"p"), style, fontsize = "40nx"; 
i» console. log($("p').style) 
esS2Properties { font-size: } 
; 


\ hr 





Abb. 8.2 fontsize-Eigenschaft im style -Objekt mit vorhandenem px-Wert 


Genau darin besteht das Problem: Sie können einen Wert erst dann aus dem 
Style-Objekt auslesen, wenn Sie ihn vorher mit JS gesetzt haben. Auch ein 
sogenannter Inline-Style (style-Attribut) würde den Wert im Objekt setzen. In der 
Praxis empfiehlt es sich aber nicht, mit Inline-Styles zu arbeiten. Standwerte, die 
der Browser setzt oder Werte, die Sie in einem CSS-Stylesheet festelegt haben, gibt 
das Style-Objekt leider nicht preis. 


Styling-Werte grundsätzlich mit JS statt mit C5S festzulegen, wäre aber auch keine 
gute Lösung — Nerdworld-Designerin Denise würde das gar nicht gut finden... 
Grundsatzfragen mit getComputedStyle 


Tatsächlich gibt es eine gute Lösung: die Funktion getComputedStyle. Diese 
Funktion ist eine Methode des window-Objektes und dadurch global verfügbar 
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— d.h. statt window.getComputedStyle genügt es, einfach nur 
getComputedStyle zu schreiben. Sie steht in allen modernen Browsers zu Verfü- 
gung und ist im IE ab Version 9 nutzbar. 


Übergeben Sie getComputedstyle ein HTML-Element-Objekt, wie z.B. unser p- 
Tag, erhalten Sie ein Style-Objekt zurück — wie gewohnt vom Typ 
CsSStyleDeclaration.Das Besondere daran ist aber, dass dieses Objekt die tat- 
sächlichen, berechneten Werte beinhaltet. So wertet die Funktion auch Browser- 
standards und CSS-Eigenschaften inkl. externer Stylesheets aus. Probieren Sie es: 
Laden Sie die Seite neu und geben Sie ein: 


console. log(getComputedStyle($("p")).fontSize) 


Sie erhalten 16px, den Standardwert des Browsers. 


Wenn Sie sich das komplette Objekt ausgeben, sehen Sie, dass praktisch alle Eigen- 
schaften mit Werten belegt sind. 


Perfekt — da wird Björn sich aber freuen. Sie können getComputedstyle nun für 
Ihre Funktion current FontSize verwenden: 


const currentFontSize = () => 
parselnt (getComputedStyle($("p")).fontSize); 


Hier ist der komplette Code: 


'use strict"; 





econst init= ) =>L 
$("#inc").on("click", incFontSize); 
$("#dec").on("click", decFontSize); 


const incFontSize 
const decFontSize 


() => setFontSizeTo(currentFontSize() +5); 
() => setFontSizeTo(currentFontSize() - 5); 


const currentFontSize = () = 
parseInt (getComputedStyle($("p")).fontSize); 


const setFontSizeTo = size => 
$("p").style.fontSize = size + "px"; 


init(); 









2} 


u 





1 


Codebeispiel 8.5 additional_files/08/examples/font_size_inc_dec/font_size.js 
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Besonderheiten und Nachteile von getComputed- 
Style 


Tja, das hört sich ja schon echt gut an mit dem 
getComputedStyle. Auch, wenn ich nur ungern der 
Spaßverderber sein will, aber: Zwei Sachen muss ich 
klarstellen. 


Read-Only 


Das CSSStyleDeclaration-Objekt, das da zurück- 
kommt, unterscheidet sich in einem ganz wesentlichen 
Aspekt vom normalen .style-Objekt: Die Eigenschaf- 
ten lassen sich nicht ändern! Sie sind Read-Only. Das ist 
nicht wirklich ein Problem, schließlich lässt sich dafür 
das .style-Objekt verwenden — aber Sie müssen 
daran denken. 





Geben Sie z.B. 
getComputedStyle($("p")).fontSize = "19px"; 


in die Konsole ein, straft Sie der Browser mit Meldungen 
wie dieser: 


VM3602@:1 Uncaught DOMException: Failed to set 
the 'font-size' property on 
'cSSStyleDeclaration': These styles are 
computed, and therefore the 'font-size' 
property is read-only. (...) 


Perfomance 


getComputedStyle ist nicht gerade dafür bekannt, ein 
Rennpferd zu sein. Es ist viel, viel langsamer als .style. 
Deswegen ist es manchmal ein guter Trick, den ersten 
Wert per getComputedStyle zu ermitteln (z.B. in der 
init-Funktion) und danach mit dem deutlich schnelle- 


ren „style zu arbeiten. 
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den Text oh e a lese ie war ganz begeistert 





Allerdings nie: sie mit einigen Begriffen auf der in 
site wenig anfangen und wollte wissen, was cerebral cor- 
tex und neuron eigentlich heißt. Könnten wir vielleicht 
kleine Erklärungstooltips einblenden, wenn jemand mit 
de Maus über ein Fremdwort fährt? 





Ads und nein — ich meine nicht diese Minitooltips, 
die man durch das tit 1e-Attribut bekommt, sondern 
schöne große Tooltip- Boxen, die Denise, unsere Da 
gnerin, auch stylen kann. _ 





Die Erklärungstexte zu den Begriffen sollen später über 
eine externe Datei eingelesen werden — so, dass wir sie 
selbst pflegen können. Aber das brauchen wir nicht 
sofort. Wir schicken Ihnen die Texte per E-Mail und Sie 
können sie dann direkt in den Code einbinden. 





Brain Specimen Coasters 


CEREBRAL COASTERS, 








maf Lonsestetur —adipisicn 
voluptätes, venham Tader ; 
Poop. We just made yoire PO5P. WE night also have caused memories and images 
of Poop 10 plop through your brain. Whew, such power. To celebrate the power of our headiest 
of organs, we bring you these awesome Brain Specimen Coasters. 


Each set uf Brain Speeimen Coasters comes with ten glass coasters. Each coaster has four 
nubber feet (to further protect the surfaces the coasters are protecting in the first place) and a 
slice of brain printed on it. If you stack your Brain Specimen Coasters in the proper order 
(which is easy to do, since the coasters are labeled) and look from the proper angle. you'll see a 


I er 


Los gehts! Nach kurzem Überlegen wird klar: Das ist wieder ein Fall für das Style- 
Objekt. Betrachten Sie folgende HTML-Vorlage, die eine vereinfachte Fassung der 
echten Seite?” darstellt: 
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<!DOCTYPE html> 
<html Lang="en"> 


<head> 
<meta charset="UTF-8" /> 
<title>Tooltips</title> 






<script sre". „Ziele 2.» lib/den. heilper.]s" 
defer="defer"></script> 
<script sre="tooltips.js" defer="defer"></script> 


eu 


<link rel="stylesheet" href="tooltips.css"” /> 


<hi>Brain Specimen Coasters</hi> 
<h3>CEREBRAL COASTERS.</h3> 


<img src="../images/brain_specimen_coasters.jpg" 
"brain_specimen_coasters" /> 


<p>In your <span class="keyword">cerebral cortex</span> right 
now, there are billions of <span class="keyword">neurons</span> 
working like crazy so you exist. And the neat thing about these 
neurons is how we've <span class="keyword">hijacked</span> a bunch of 
them into reading these words. Think of all the areas of your brain 
we are commandeering right now! <span class="keyword">Poop</span>. We 
just made you read the word poop. We might also have caused memories 
and images of <span class="keyword">poop</span> to plop through your 
brain. Whew, such power. To celebrate the power of our headiest of 
organs, we bring you these awesome Brain <span 
lass="keyword">Specimen</span> Coasters.</p> 







. 2| <p>Each set of Brain <span class="keyword"'>Specimen</span> 
Coasters comes with ten glass coasters. Each coaster has four rubber 
feet (to further protect the surfaces the coasters are protecting in 
the first place) and a slice of brain printed on it. If you stack 
your Brain Specimen Coasters in the proper order (which is easy to 
do, since the coasters are labeled) and look from the proper angle, 
you'll see a full brain. Plus, if you use your Brain Specimen 
Coasters at your next science party, your friends will know how 
thoughtful you really are. Get it? Brain Specimen Coasters? 
Thoughtful? Uhhh.... <span class="keyword">poop</span>.</p> 

BE] </body> 





Codebeispiel 8.6 additional_files/08/examples/tooltips/T/tooltips.html 


Björn hat einige der Wörter mit der Klasse keyword markiert. Das sind die Wörter, 
die ein Tooltip mit Erläuterung benötigen. Diese Wörter müssen Sie selektieren. 
Probieren Sie zunächst folgende Anweisung in der JS-Konsole aus: 


nn nn a m 


39. Herzlichen Dank für die freundliche Genehmigung an Think Geek Inc.! Entnommen aus 
www.thinkgeek.com/product/huir/ 
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$$(".keyword").forEach(n => console. log(n.innerHTML)); 


Sie erhalten: 


cerebral cortex 
neurons 
ilacked 
Poop 
POOop 
€ Specimen 


poop 


So weit, so gut! Erweitern Sie die Zeile nun zu einem richtigen Programm und 
registrieren Sie eine Funktion showTooltip auf das mouseenter-Event. Der 
Browser löst dieses Event aus, sobald sich der Mauszeiger über eines der Wörter 
bewegt. 


Im ersten Schritt möchten wir einfach nur sehen, ob die Funktion richtig angebun- 
den ist. Deswegen genügt auch hier eine Ausgabe mit console.log. 


"use strict"; 


t 






const init = () => $$(".keyword").on("mouseenter", showTooltip); 
const showTooltip = e => console. log(e.target.innerHTML); 


init(); 
Codebeispiel 8.7 additional_fles/08/examples/tooltips/ 1/tooltips.js 


Als Nächstes benötigen Sie das Tooltip. Zum Glück hat Nerdworlds Designerin 
Denise bereits eins erstellt und mit CSS gestylt. Das Tooltip selbst ist lediglich ein 
div-Tag, der den Erklärungstext enthält — da Björn noch keine Texte geliefert 
hat, reicht vorerst auch ein lorem ipsum-Platzhaltertext. 


El <div id="tooltip">Lorem ipsum dolor sit amet, consectetur 


adipisicing elit. Quis voluptates, veniam facere laudantium.</div> 


Fügen Sie den Tag einfach am Ende des HTML-Dokuments vor dem schließenden 
body -Tagein. 


El <!DOCTYPE html> 

“ <html lang="en"> 
<head>...</head> 

<body> 
<Pp>...</Pp> 
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<div id="tooltip">Lorem ipsum dolor sit amet, consectetur 
adipisicing elit. Quis voluptates, veniam facere laudantium.</div> 


Dank der folgenden CSS-Regel aus tooltips.css besitzt das Tooltip bereits eine 
ansprechende Optik: 


#tooltip { 

width: 250px; 

border: 2px solid #339; 
padding: 5px; 
background-color: #eef; 
opacity: 0.95; 
font-size: lem; 
text-align: justify; 





Denise wird das später sicher noch schöner machen. 


Fügen Sie der Regel den Stil display: none; hinzu, damit das Tooltip nach dem 
Laden der Seite zunächst versteckt ist. Erst wenn ein Besucher der Website den 
Mausezeiger über eines der Wörter bewegt, soll sich das Tooltip zeigen. Dazu müs- 
sen Sie lediglich per JavaScript den display -Wert des Tooltips auf block setzen. 
Das liegt daran, dass es sich dabei um ein div -Element handelt. Beieinem span - 
Element müssten Sie stattdessen den Wert inline verwenden. 


$("#tooltip").style.display = "block"; 


Das Setzen des Display-Stils ist die Aufgabe der Funktion showTooltip. Modifi- 
zieren Sie sie entsprechend. 


const showTooltip = () => $("#tooltip").style.display = "block"; 


...und wieder weg 


Das Tooltip sollte wieder verschwinden, wenn der Besucher den Mauszeiger weg- 
bewegt. Dazu benötigen Sie noch eine passende Funktion hideTooltip, die Sie 
am besten auf das mouseleave -Event registrieren. Hier ist der komplette Code: 


"use strict"; 


{ 
const init = () => $$(".keyword") 
„on("mouseenter", showTooltip) 
„on("mouseleave", hideTooltip); 


const showTooltip = () => $("#tooltip").style.display = "block"; 
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const hideTooltip = () => $("#tooltip").style.display = "none"; 


init(); 


} 
Codebeispiel 8.8 additional_fles/08/examples/tooltips/2/tooltips.js 


Damit das Tooltip auch wirklich ein Tooltip ist, darf es nicht unter dem Text stehen, 
sondern sollte immer in der Nähe des Mauszeigers erscheinen. Gdereben Sie dem 
Tooltip im CSS die Eigenschaft position: absolute, um eine freie Positionie- 
rung zu ermöglichen: 


eu 





p { 
font-size: 1.5em; 


} 


„keyword { 
font-weight: bolder; 
color: #225; 

+ 


#tooltip { 
width: 250px; 
border: 2px solid #339; 
padding: 5px; 
background-color: #eef; 
opacity: 0.9; 


font-size: lem; 
text-align: justify; 


display: none; 
position: absolute; 


Codebeispiel 8.9 additional_files/08/examples/tooltips/3/tooltips.css 


Zudem sollten Sie das Eventvon mouseenter auf mousemove ändern, damit sich 
die Position ständig anpasst: 
$3(".keyword") .on ("mousemove", showTooltip) 


Maus im Fokus 


Als Nächstes gilt es herauszufinden, wo sich der Mauszeiger eigentlich befindet. 
Bei Mouse-Events kümmert sich praktischerweise das Event-Objekt darum. Es 
zeichnet die aktuelle Position des Mauszeigers in den Eigenschaften clientx 
und clientY auf. 


Erweitern Sie die Funktion showTooltip — so dass das Tooltip an die Position 
des Mauszeigers springt: 
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@ const showTooltip= e => 1 
$("#tooltip").style.display = "block"; 
$("#tooltip").style.top = e.clientY + "px"; 
$("#tooltip").style.left = e.clientX + "px"; 





Mit den Style-Eigenschaften top und left lässt sich das Tooltip pixelgenau 
positionieren — möglicherweise etwas zu genau. Nun »klebt« das Tooltip immer 
genau am Mauszeiger. Ein geringer Abstand von z.B. 10px behebt das Problem. 


$("#tooltip").style.top = e.clientY + 10 + "px"; 
$("#tooltip").style.left = e.clientX + 10 + "px"; 


Am besten lagern Sie den Wert noch in eine Konstante aus, um die Magic Num- 
ber” loszuwerden. Hier der vollständige Code: 


"use strict"; 


38 





const MOUSE_TO_TOOLTIP = 10; 


const init = () > { 

u $$(".keyword").on("mousemove", showTooltip).on("mouseleave", 
hideTooltip); 

}; 


const showTooltip= e => { 

$("#tooltip").style.display = "block"; 

$("#tooltip").style.top = e.clientY + MOUSE_TO_TOOLTIP + "px"; 
$("#tooltip").style.left = e.clientX + MOUSE_TO_TOOLTIP + "px"; 


}; 
const hideTooltip = () => $("#tooltip").style.display = "none"; 


init(); 
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Hurra — die Tooltips funktionieren. Oma hat sich riesig 
gefreut. Endlich weiß sie, was der cerebral cortex ist. 
Naja, vielleicht hätten wir poop nicht erklären müssen... 

















40. Eine genaue Erklärung dazu finden Sie in JavaScript Band 1 - Aller Anfang ist leicht 
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8.3 


. = gibt oft Situationen, i in | denen Sie eine Entscheidung 
treffen müssen. Entweder Sie arbeiten mit 

elasshis. sales sList. remove, um CSS-Eigen- 
‚schaften zu verändern (siehe Abschnitt 3.2) — oder aber 
Sie greifen auf das Style-Objekt zu und verändern eine 





Stilvoll oder eher mit Klasse? m _._ | 


Eigenschaft direkt. Wann sollten Sie was tun? 


In den allermeisten Fällen ist es besser, Sie arbeiten 
mit CSS-Klassen. Das hat den großen Vorteil, dass Sie 
Design-Aspekte (CSS) von Verhaltens-Aspekten (JS) 
getrennt halten. Innerhalb der CSS-Klasse sind die CSS- 
Eigenschaften gekapselt. Der JS-Code entscheidet nur 
über das Hinzufügen und Entfernen von Klassen, aber 
nicht darüber, welche konkreten Eigenschaften das 
betrifft. 


So kann beispielsweise ein Designer hinterher das CSS 
verbessern, ohne den JS-Code anfassen zu müssen. 
Selbst wenn Designer und Entwickler die gleiche Person 
sind, erleichtert das die Arbeit ungemein. Sind JS und 
CSS-Code vermischt, bedeutet eine Änderung an der 
Optik (CSS) immer ein Risiko, auch unerwünschte Ver- 
haltensänderungen (Bugs!) einzuführen. 


Dennoch gibt es Situationen, in denen es besser ist, mit 
dem Style-Objekt direkt zu arbeiten — wie etwa im Bei- 
spiel mit den Schriftarten. Sie müssten dort für eine 

große Spanne von Fontgrößen jeweils passende Klassen 
anlegen, da die Plus/Minus-Buttons mit einem Delta von 





5px arbeiten. 


ruhen 


Übung 16: .010010000100111101010100— Teils 


Fragen Sie hiesser immer noch nicht nach dem Sinn. Der neue Wunsch 


besteht darin, den Text blau (» 
CSS-Klassen verwenden. _ 





e) zu färben. Dieses Mal dürfen Sie keine 


Das Style-Objekt 
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HTML unterwandern mit 
Data-Attributen 











Wie schon gesagt: Die Tooltips sind super! Wir benöti- 
gen jetzt aber ers tmal eine einfache Möglichkeit, die 
Texte der Tooltips zu pflegen. Mir wäre es am liebsten, 
wenn ich sie erst mal direkt im HTML hinterlegen 
könnte. Geht das irgendwie? 











| 





Ja, das geht. Es gibt sogar mehrere Möglichkeiten. Am einfachsten ist es, soge- 
nannte data-Attributes zu verwenden. Damit sind Sie in der Lage, beliebige 
Inhalte quasi »unsichtbar« im HTML zu speichern! 


HTML erlaubt es, eigene Attribute zu definieren, sofern diese mit data- begin- 
nen. Sie können beispielsweise ein Attribut namens data-tooltip definieren 
und dort den jeweiligen Text hinterlegen. Das tooltip ist dabei ein Name, den 
Sie selbst wählen können. Er ist von HTML nicht vorgeschrieben. Sie haben dabei 
nahezu beliebige, aber nicht alle Freiheiten (z.B. Großbuchstaben sind nicht 
erlaubt). Auch Tooltips wie data-foo, data-der-kunde-ist-doof oder 
data-was-immer-sie-wollen wären möglich. 


Ei <p>In your <span class="keyword" data-tooltip="The brain's outer 
layer of neural tissue in humans and other mammals 
[wikipedia].">cerebral cortex</span> right now,... 


Versuchen Sie, das Attribut testweise in der Konsole auszulesen. Dazu benötigen 
Sie zunächst das Element: $(".keyword") . Um an ein data- -Attribute ranzu- 
kommmen, benutzen Sie die Eigenschaft dataset: 


$(".keyword").dataset 


Sie erhalten eine DOMStringMap zurück. Die können Sie behandeln wie jede 
andere Map. Jedes Data-Attribut ist in dieser Map mit seinem eigenen Key vertre- 
ten — so z.B. auch tooltip. Hier ist der Rückgabewert der letzten Anweisung: 


FW D0MStringMap {tooltip: "The brain's outer layer of neural tissue in 
humans and other mammals [wikipedia]."} 
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Jetzt müssen Sie Ihren JS-Code so anpassen, dass er statt des statischen Lorem 
Ipsums den korrekten Text aus dem data -Attribut zeigt. Fügen Sie die folgende 
Zeile in die Funktion showTooltip ein: 


$("#tooltip").textContent = e.target.dataset. tooltip; 


Das Attribut textContent ermöglicht es, einem Tag (wie hier dem tooltip-div, 
das das Lorem Ipsum enthält) einen beliebigen Textinhalt zuzuweisen. Damit ist es 
dem Attribut innerHrM1 recht ähnlich. Tatsächlich könnten Sie hier problemlos 
auch innerHTML verwenden. Wenn es Ihnen aber, wie hier, um reinen Text geht, 
ist textContent vorzuziehen. textContent interpretiert einen zugewiesenen 
String nicht als HTML — Sie können auch Zeichen wie & oder < direkt im Text ver- 
wenden. 


9.1 Zusammenfassung 





dataset $("#bar").dataset Enthält eine DOMStringMap mit den 


Daten der data-Attribute. 











textContent | $("#bar").textContent | Gibt den Text (ohne HTML-Tags) zurück, 
der sich im HTML-Element befindet — 


der Wert kann auch verändert werden. 








Tabelle 9.1 Attribute dieser Lektion 
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The Colosseum or Coliseum (/kola’sizam/ kol-9-see-sm), also known as the Flavian 
Amphitheatre (Latin: Amphitheatrum Flavium; Italian: Anfiteatro Flavio [amfite’a:tro “Na:vjo] or 
Colosseo [kolos’se:o]), is an oval amphitheatre in the centre of the city of Rome, Italy. Built of 
conerete and sand, [1] it is the largest amphitheatre ever built. The Colosseum is situated Just east of 


tbe Roman Forum. Construction began... 
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Von neuen Elementen und  |)/, 


angehängten Kindern: 
createElement & appendChild 





Die Mädels und Jungs von der Business-Development- 
Unit haben den Servercode für unser neues 
Produktmanager-Tool fertig. Wir sind uns aber noch 
unsicher, wie die Oberfläche dazu aussehen könnte. 
Deswegen bräuchten wir dringend mal einen Prototyp. 
Der muss noch keine Verbindung zum Server aufwei- 
sen, sondern im Wesentlichen demonstrieren, wie die 
Produktpflege im Web funktionieren könnte. Da hab!' ich 
dann an Sie gedacht... 





Products 











nn Name 2 
3Doodler 3D Printing Pen 








Powerstation 5- E. Maximus Chargus 








8-Bit Legendary Hero Heat-Change Mug 





Perfect new product € 123 2 Add 


Abb. 10.1 Erster Prototyp des Produktmanagers (mit Hinzufügen-Fea- 
ture) 








L 





Nachdem Sie mit Björn die genauen Anforderungen detailliert besprochen haben, 
können Sie ein HTML-Gerüst mit Produkt-Beispielen für das Produktpflege-Inter- 
face liefern: 







<hl>Products</h1> 
<table id="products"> 
<thead> 

<tr> 
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<th>Name</th> 
<th>Price in €</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
<td>3Doodler 3D Printing Pen</td> 
<td>29.99</td> 
</tr> 
<tr> 
<td>Powerstation 5- E. Maximus Chargus</td> 
<td>44.,95</td> 
</tr> 
<tr> 
<td>8-Bit Legendary Hero Heat-Change Mug</td> 
<td>6.99</td> 
</tr> 
: </tbody> 
= </table> 
<p id="new_product"> 
<input type="text" placeholder="name" class="name"/> 
€ <input type="number'" max="999" placeholder="price" 
class="price"/> 
2 <button id="add_product">Add</button> 
il </p> 







Codebeispiel 10.1 additional_files/10/examples/product_manager_ 1/product_manager.html 


Erst einmal sollte der Add-Button funktionieren. Dazu registrieren Sie — wie üblich 
— eine Funktion auf das Click-Event: 


"use strict"; 
{ 
const init= () >1 
$("#add_product").on("click", addProduct); 


104 
const addProduct = () > { 


a 


init(); 


10.1 HTML generieren lassen mit docu- 
ment.createElement 


Was genau soll addProduct tun? Ein möglicher Ansatz wäre, mit innerHTML die 
Tabelle neu zu schreiben und dabei jeweils das neueste Produkt anzuhängen. Das 
könnten Sie bereits umsetzen. 


Das hätte aber den gravierenden Nachteil, dass Sie jedes Mal die Tabelle neu ins 
HTML schreiben müssten, obwohl nur eine neue Zeile dazukommt. Ein weiterer 
Nachteil ist, dass Sie mit eher »weichen« Strings arbeiten statt mit einen DOM- 
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Teilbaum. Strings sind anfällig gegenüber Syntaxfehlern und Sie können keine 
Methoden des Node-Objekts anwenden, solange Sie den String noch nicht mittels 
innerHTML in die Seite veingehängt« haben. 


Besser wäre es, komplette HTML-Teilbäume zu konstruieren und diese dann bei 
Bedarf in den Hauptbaum einzuhängen. 


Das ist ohne Weiteres möglich! 





Dazu sind ein paar neue Methoden nötig. Mit document .createElement kön- 
nen Sie ein HTMLElement-Objekt erzeugen, also hier zunächst mal ein td. 


const addProduct = () => { 
const valueTd = document.createElement ("td"); 


}; 


Diesem können Sie dann mittels textContent einen Text als Inhalt zuweisen, in 
diesem Fall den neuen Produktnamen aus dem Eingabefeld. 


const addProduct = () = { 
const valueTd = document.createElement ("td"); 
valueTd.textContent = $("#new_product .name").value; 


Lassen Sie sich das erzeugte Objekt einfach mal mit console.1log (valuerd); 
ausgeben: 


const addProduct = () => { 
const valueTd = document.createElement ("td"); 
valueTd.textContent = $("#new_product .name").value; 
console.log(valueTd); 


Geben Sie als Produktname testweise z.B. Mein Neues Produkt und 100€ ein. Sie 
erhalten: 


<td>Mein Neues Produkt</td> 


Es handelt sich bei valueTd aber nicht etwa um den String <td>Mein Neues 
Produkt</td>, sondern tatsächlich um ein HTMLTableCellElement , eine Spe- 
zialisierung von HTMLElement bzw. von Node. Letzteres bedeutet, Sie könnten 
z.B. die classt.ist manipulieren oder Event-Handler dranhängen, was mit 
einem String so nicht machbar wäre. 
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10.2 Endlich angefügt: appendChild 


Um die Tabellenzeile zu vervollständigen, müssen Sie noch das td mit dem Preis 
bauen und anschließend beide Elemente an ein neues tr anhängen. Zum Anhän- 
gen verwenden Sie die Methode appendchild des Node-Objekts: 


const addProduct = () > { 
const valueTd = document. createElement ("td"); 
valueTd.textContent = newProductName(); 
const priceTd = document. createElement("td"); 
priceTd.textContent = newProductPrice(); 
const product!r = document. createElement("tr"); 
productTr.appendChild(valueTd); 
productTr.appendChild(priceTd); 
console.log("productTr", productTr); 


} 


Das console.1og am Ende der Funktion zeigt Ihnen nun das komplette HTML- 
Fragment der Tabellenzeile: 


<tr> 
<td>Mein Neues Produkt</td> 
<td>100</td> 

</tr> 


Sobald Sie dieses Fragment an der richtigen Stelle (dem tbody der Tabelle) in den 
HTML-Hauptbaum einhängen, erscheint die neue Zeile. 


$("#products > tbody").appendChild(productTr); 
Hier nochmal zur Übersicht der komplette Code: 


"use strict"; 


{ 
const init= () >{ 
$("#add_product").on("click", addProduct); 
}; 


const addProduct = () > {1 
const valueTd = document.createElement("td"); 
valueTd.textContent = $("#new_product .name").value; 


const priceTd = document. createElement("td"); 
priceTd.textContent = $("#new_product „price").value; 


const productTr = document.createElement("tr"); 
productTr.appendChild(valueTd); 
productTr.appendChild(priceTd); 
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$("#products > tbody").appendChild(productTr); 


’ 


init(); 


} 


Codebeispiel 10.2 additional_fles/10/examples/product_manager_1/product_manager.js 





Natürlich ist der Code nicht gerade ein Kunstwerk. Das erwartet auch niemand — 
aber zumindest etwas mehr Lesbarkeit wäre gut. Da Sie keinen Ärger mit Carl dem 
Consultant wollen, ist noch ein wenig Refactoring angesagt. 


10.3 Mal wieder etwas Refactoring 


Das Kernproblem besteht darin, dass die Funktion addProduct viele zu viele Ver- 
antwortlichkeiten hat. Sie 


>» nimmt die Produktdaten aus dem Formular entgegen 
> fügt das Produkt grundsätzlich hinzu 


> kümmert sich um Low-level-Belange, wie das Erzeugen der benötigten tr -- 
und ta -Elemente. 


Genau diese Verantwortlichkeiten sollten Sie trennen (Separation of Concerns), 
anderenfalls enstehen unangenehme Redundanzen. Der Zugriff auf 
createElement, appendChild und textContent passiert möglicherweise 
öfter als nötig. Das kann ein erster Hinweis darauf sein, wo es sich lohnt, Funktio- 
nalität auszulagern. 





Beginnen wir mit den Low-level-Belangen. In folgendem Code zeichnet sich ein 
Muster ab: 


const valueTd = document.createElement ("td"); 
valueTd.textContent = $("#new_product .name").value; 
const priceTd = document.createElement ("td"); 
priceTd.textContent = $("#new_product .price").value; 


Der Code erzeugt zweimal ein td und weist diesem einen Textinhalt zu. Wie wäre 
es mit einer Methode namens — Achtung... — td, die genau das tut? 


const td = text = 

const tdNode = document. createElement ("td"); 
tdNode.textContent = text; 

return tdNode; 


}; 
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Damit beleibt von addProduct übrig: 


const addProduct = () > 1 

const productTr = document. createElement("tr"); 
productTr.appendChild(td($("#new_product ‚name").value)); 
productTr.appendChild(td($("#new_product „price").value)); 
$("#products > tbody").appendChild(productTr); 

% 


Es ist naheliegend, mit dem tr-Element genauso zu verfahren. Der Unterschied 
ist, dass das tr statt eines Textes mehrere tq -Elemente (als Array) entgegenneh- 
men kann. 


const tr = tds => { 
const trNode = document.createElement("tr"); 
tds.forEach(td => trNode.appendChild(td)); 
return trNode; 


}; 
Ein erneuter Blick auf addProduct zeigt: 


const addProduct = () => 
$("#products > tbody").appendChild( 
tr(l 
td($("#new_product .name").value), 
td($("#new_product .price").value) 


Y; 


Als Letztes gilt es noch, das Auslesen der Produktdaten vom Hinzufügen des Pro- 
dukts zu trennen. Es kann gut sein, dass Sie später mal Produkte hinzufügen möch- 
ten, deren Daten nicht aus den Formularfeldern kommen (Achtung, Spoiler): 


const init = () >{ 
$("#add_product").on("click", addProductFromInput); 


const addProductFromInput = () => 
addProduct( 
$("#new_product .name").value, 
$("#new_product .price").value 
); 
const addProduct = (name, price) => 
$("#products > tbody").appendChild( 
tr(l 
td(name), td(price) 
)) 
5 


...nach etwa 2 Minuten und 33% Sekunden Refactoring kommen wir also zu fol- 
gendem Gesamtergebnis: 
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"use strict"; 








const init =S0»>{ 





const.  addProductFroninput = () => 
 addProduct( 
$("#new_product a. ‚value, 
se Mew pradyer ‚Price )- re 
); 


const. addProduct - - ae > > 
$("#products > ehouy 7 anpenecn Idl 
il 
td(name), en 
» 


En 


const td = text => { 
const tdNode = document.createElement ("td"); 
tdNode. textContent = text; 
return tdNode; 


» 
’ 


const tr = tds => { 
const trNode = document.createElement ("tr"); 
tds.forEach(td => trNode.appendChild(td)); 
return trNode; 


’ 


init(); 


Codebeispiel 10.3 additional_files/ 10/examples/product_manager_2_refact/product_manager.js 
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10.4 _Undnoch ein wenig JSON 





Könnten Sie die drei Produkte aus dem HTML heraus- 
nehmen? Mir wäre es lieber, wenn wir sie über eine 
externe Datei pflegen könnten. Ich weiß, ich weiß... es 
ist ein Prototyp. Aber um den sinnvoll zu testen, ist es 
auch sinnvoll, wenn wir die Produkte schnell ändern 
könnten, ohne das HTML anzupassen. 





Für unsere DB haben wir einen JSON-Export — so könn- 
ten wir bei Bedarf einfach mal schnell mit ein paar ech- 
ten Produkten testen. Können wir die Produkte in der 
Zusatzdatei als JSON JavaScript Object Notation) spei- 
chern? 











Natürlich lässt sich das einrichten! Die Datei für die drei Produkte sieht folgender- 
maßen aus: 


"use strict"; 





const PRODUCTS = [| 
{name: "3Doodler 3D Printing Pen", price: 29.99}, 
{name: "Powerstation 5- E. Maximus Chargus", price: 44.95}, 
{name: "8-Bit Legendary Hero Heat-Change Mug", price: 6.99} 
I; 


Codebeispiel 10.4 additional_files/10/examples/product_list.js 


In der Konstante propucts sind die drei Produkte in einem Array gespeichert. 
Jedes der Array-Elemente ist ein Objekt und hat die Attribute name und price 
mit den entsprechenden Werten. 


Wenn Sie diese Daten bequem verwenden möchten, sollten Sie zunächst ein wei- 
teres Refactoring des Produktmanager-Codes durchführen: Statt der Funktion 
addProduct jeweils name und price getrennt zu übergeben, wäre es hilfreich, 
diese zu einem Objekt zusammenzufassen, wie Sie sie im PRODUCTS -Array vorfin- 
den— z.B. {name: "3Doodler 3D Printing Pen", price: 29.99}. 


Ändern Sie dazu zunächst die Funktion addProduct. Innerhalb der Funktion 
können Sie auf die ursprünglichen Werte name und price als Attribute 
product.name und product.price des übergebenen Objekts product 
zugreifen. 
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" const addProduct = product => 
$("#products > tbody"”).appendChild( 
tr(l 
td(product.name), td(product.price) 
]) 
1; 





Passen Sie den Aufruf von addProduct in der Funktion addProductFromInput 
an. Damit der Code wieder funktioniert, müssen Sie addProduct nun ein Objekt 


übergeben. Dieses Objekt erstellen Sie direkt beim Aufruf aus den Formularwerten 
für name und price. 


Pen 





” const addProductFromInput = () => 
addProduct({ 

name: $("#new_product .name").value, 
price: $("#new_product .price").value 
+»; 


addProduct arbeitet nun mit ganzen Objekten statt nur mit einzelnen Werten. 
Das macht es leicht, die Objekte aus der PRODUCTS -Konstante beim Laden hinzu- 
zufügen. Schreiben Sie dazu eine neue Funktion addExistingProducts, die mit 
forEach alle Produkte hinzufügt. 


const addExistingProducts = () => PRODUCTS. forEach(addProduct); 


Rufen Sie siein init auf. 


Mi const initt= ()>{ 
addExistingProducts (PRODUCTS); 
$("#add_product").on("click", addProductFromInput); 


Sl 





Hurra, die Produkte werden importiert. Wie üblich, ist hier nochmal der Code im 
Ganzen: 


"use strict"; 


{ 
const init= () >{ 
addExistingProducts (PRODUCTS); 
$("#add_product").on("click", addProductFromInput); 


’ 


const addExistingProducts () => PRODUCTS. forEach (addProduct); 
const addProductFromInput = () => 
addProduct({ 
name: $("#new_product .name").value, 
price: $("#new_product .price").value 


2); 
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} 


const addProduct = product => 
$("#products > tbody").appendChild( 
tr(l 
td(product.name), td(product.price) 
1) 


const td = text > I 
const tdNode = document. createElement("td"); 
tdNode.textContent = text; 
return tdNode; 


}; 


const tr = tds > { 
const trNode = document.createElement("tr"); 
tds. forEach(td => trNode.appendChild(td)); 
return trNode; 


} 


init(); 


Codebeispiel 10.5 additional_files/1 O/examples/product_manager_3_json/product_manager.js 











| 
Ha — ich hab' gerade eine riiieesen-Datei mit Produkten 
im JSON-Format ausprobiert. Funktioniert perfekt! 








10.5 Vergleich verschiedener DOM-Creation- 


Sie 


Methoden 


haben in diesem Kurs verschiedene Möglichkeiten zur Erzeugung von DOM- 


Elementen kennengelernt. Tabelle 10.1 zeigt die verschiedenen Möglichkeiten 
noch mal im Vergleich. Dazu gehen wir von folgender einfachen HTML-Struktur 
aus: 


<body> 


<p>Wortd</p> 


</body> 
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document.body 
„innerHTML = "<p>Hello</p>"; 


<body> 
<p>Hello</p> 
<body> 











document.body 
„textContent = "Hello"; 


<body>Hello</body> 




















document.body <body> 
.appendChild($(p).cloneNode()); <p>World</p> 
<p>World</p> 

<body> 

document. body <body> 
„appendChild( <p>World</p> 

document. createElement ("br") <br /> 
)5 <body> 


Tabelle 10.1 DOM-Creation-Methoden im Vergleich 
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appendChild Hängt einen übergebenen Knoten (z.B. ein Ele- 
ment) als letztes Kind an den Elternknoten an, auf 
dem die Methode aufgerufen wurde. 

Falls der angehängte Knoten bereits Teil des Doku- 
ments war, wird er von seiner ursprünglichen Posi- 


tion entfernt. 
document.createElement | Erzeugt ein Element des angegebenen Typs. 


cloneNode Kopiert einen Knoten und gibt die Kopie zurück. 
cloneNode (true) kopiert auch alle Kindknoten 


mit. 


Tabelle 10.2 Methoden dieser Lektion 
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Beispiel zu appendChild mit createElement 





EEE Eee ee 








HTML-Struktur (vorher): 


<body> 
<ul> 
<li>0</li> 
<li>1</li> 
<li>2</li> 
<li>3</li> 
</ul> 
</body> 


JavaScript in der Konsole: 


const li = document.createElement("li"); 
li.textContent = "4"; 
$("ul").appendChild(li); 


HTML-Struktur (nachher): 


<body> 
<ul> 
<li>0</li> 
<li>1</li> 
<li>2</li> 
<li>3</li> 
<li>4</li> 
</ul> 
</body> 


Beispiel zu appendChild mit cloneNode 


HTML-Struktur (vorher): 
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<body> 
<ul> 
<l1>0</li> 
<li>1I</li> 
<li>2</li> 
<li>3</li> 
</ul> 
</body> 


JavaScript in der Konsole: 


const li = $("ul li:first").clone(true); 
$("ul").appendChild(li); 


HTML-Struktur (nachher): 


<body> 
<ul> 
<li>0</li> 
<li>1</li> 
<li>2</li> 
<li>3</li> 
<li>4</li> 
<li>0</li> 
</ul> 
</body> 


Beispiel zu appendChild ohne cloneNode 


HTML-Struktur (vorher): 


<body> 
zul> 
<li>0</li> 
<li>1</li> 
<lı>2</l1> 
<li>3</li> 
</ul> 
</body> 


JavaScript in der Konsole: 


const lı = $("ul li:first"); 
$("ul").appendChild(li); 


HTML-Struktur (nachher): 
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<body> 
<ul> 
<li>1</li> 
<li>2</li> 
<li>3</li> 
<li>4</li> 
<1i>0</li> 
</ul> 
</body> 
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Ich hab' mal testweise massig Produkte per Formular 

_ hinzugefügt. Davon würde ich aber gerne ein paar wie- 

_ der löschen. Können Sie einen Entfernen-Button hinzu- 
fügen? ll | 







Products 

















3Doodler 3D Printing Pen 29.99 x 








Powerstation 5- E. Maximus Chargus 44.95 | 





8-Bit Legendary Hero Heat-Change Mug 



















Abb. 11.1 Produktmanager: Entfernen-Feature 






Damit jedes Produkt über einen eigenen Entfernen-Button verfügt, ist eine weitere 
Spalte in der Tabelle hilfreich. Weil später neben dem Löschbutton noch weitere 
Aktionen folgen, fügen Sie der Tabelle im HTML eine Actions-Spalte hinzu. 


<table id="products"> 
<tr> 
<th>Name</th> 
<th>Price in €</th> 
<th>Actions</th> 
</tr> 
</table> 


Erweitern Sie die Funktion addProduct.. Jede Produkt-Zeile benötigt einen wei- 
teren TableData-Tag ( td) mit dem Entfernen-Button (RemoveButton). 


" const addProduct = product => 
$("#products > tbody").appendChild( 
tr(l 
td(product.name), td(product.price), tdWithRemoveButton() 
, 
) 





Es fehlt noch die Funktion tdwithRemoveButton, die das entsprechende HTML- 
Fragment anlegt. 
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const tdWithRemoveButton = () => { 
const td = document. createElement("td"); 
td.appendChild(removeButton()); 
return td; 
}i 
const removeButton = () > { 
const button = document.createElement("button"); 


button.innerText = "x"; 
button. classList.add("remove_product"); 
return button; 


H 


Die Aufteilung auf zwei Funktionen verbessert die Lesbarkeit. Der Remove-Button 
zeigt ein x als Entfernen-Symbol und erhält eine passende CSS-Klasse 
remove product .. Jetzt zur Funktionalität: 


Registrieren Sie eine Funktion removeProduct auf das click -Event. 


onst removeButton = () => { 
button.on("click", removeProduct); 


return button; 


’ 


removeProduct muss die ganze Tabellen-Zeile (tr ) mit dem Produkt entfernen. 
Dazu müssen Sie sie erst finden. Wenn Sie vom Button aus (hier event. target) 
zwei Ebenen in der Baumstruktur nach oben wechseln, haben Sie die Zeile. Das 
Nach-oben-Wechseln lässt sich mit dem Attribut parentNode erreichen — Sie 
suchen den jeweiligen Elternknoten. 


event.target.parentNode.parentNode 
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Products 

3Doodler 3D Printing Pen 29.99 

Powerstation 5- E. Maximus Chargus 44.95 iR || 
8-Bit Legendary Hero Heat-Change Mug | 6.99 a 











Network Timeline Profiles Resources 





Elements Console 








Preducts</hi> 
Yıtable id-"products > 
F«thead 
Kutreus/tr 
«/thesd 
Yetbody> 
Faıtr 
<td»3Doodler 3D Printing Pen</td> .parentNode 
.parentNode Ce <td>29 .99</td - 
ct 


tr mit Produkt 






re 





fir eventtarget 
str: 
td=Powerstation 5- E. Maximus Chargus</td 
td»44.95« td 


Abb. 11.2 Productmanager: Vom Button zur Produkt-Zeile 


Das Attribut parentNode gehört zu einer Gruppe von Attributen, die es Ihnen 
erlauben, sich innerhalb des DOM-Baums von einem Knoten (Node) zum anderen 
zu bewegen. Der Bereich, in dem diese Attribute eingeordnet sind, heißt 
DOM-Traversal — damit beschäftigen wir uns gleich noch näher. 


Entfernen Sie die gefundene Zeile (tr) mit der remove -Methode des zur Zeile 
gehörigen Node-Objekts — und sie ist weg! 


const removeProduct = event => 
event.target.parentNode.parentNode. remove(); 


Nach einem Extract-Refactoring erhalten Sie folgenden, etwas besser lesbaren 
Code: 


const removeProduct = event => 
productRowForAction(event.target).remove(); 
const productRowForAction = button => button.parentNode.parentNode; 


Und hier ist nochmal der komplette Code am Stück: 
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"use strict"; 





const init= ()»>1 

addExistingProducts (PRODUCTS); 
$("#add_product").on("click", addProductFromInput); 
2 


const addExistingProducts = () => PRODUCTS. forEach(addProduct); 


const addProductFromInput = () => 
addProduct({ 

name: $("#new_product .name").value, 
price: $("#new_product .price").value 


»; 


ii} 


const addProduct = product => 
$("#products > tbody").appendChild( 
tr(l 
td(product.name), td(product.price), tdwithRemoveButton() 
2) 
); 


const tdWithRemoveButton = () => { 
const td = document.createElement("td"); 
td.appendChild(removeButton()); 
return td; 


ir 


const removeButton = () > { 
const button = document. createElement("button"); 
button. textContent = "x"; 
button.classList.add("remove_product"); 
button.on("click", removeProduct); 
return button; 


5 


const removeProduct = event => 
productRowForAction(event.target).remove(); 


const productRowForAction = button => 
button.parentNode.parentNode; 


const td = text > { 
const tdNode = document. createElement("td"); 
tdNode.textContent = text; 
return tdNode; 

Er 


eonst- tr = tds => { 
const trNode = document.createElement("tr"); 
tds. forEach(td => trNode.appendChild(td)); 
return trNode; 


}; 


init(); 





Codebeispiel 11.1 additional_files/1 1/examples/product_manager_4_remove/product_manager.js 
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& lich E11) steht sie nicht zur Verfügung. Nur oo 
Browser wie Chrome, Firefox and Edge haben s sie direkt 
an ‚Bard. 





_ Das ist aber nicht weiter tragisch. In älteren Browsern 
gab es bereits die ähnliche Methode removeChild. 
Damit lässt sich sehr leicht der folgende Polyfill konstru- 
ieren: 


if (!('remove' in Element.prototype)) { 
Element.prototype.remove = function() {_ 
if (this.parentNode) { 
this.parentNode. removeChild(this); 
} 


} 
} 


Codebeispiel 11.2 Quelle: https://developer.mozilla.org/en-US/docs/ 
Web/API/ChildNode/remove 


Fügen Sie den Polyfill einfach in Ihre dom_helper-Library 


ein, falls Sie ältere Browser unterstützen möchten. 


11.1 Klassifizierung 








Übrigens ist es recht hilfreich, DOM-Eigenschaften nach Einsatzzweck zu klassifi- 
zieren. Eine Klassifizierung erleichtert den Überblick über die Vielzahl an Eigen- 
schaften und ist gleichzeitig hilfreich, wenn Sie etwas Bestimmtes suchen. 


Typischerweise lassen sich die DOM-Attribute und -Methoden vor allem in diese 
drei Bereiche untergliedern: 


>» DOM-Selection 
> DOM-Manipulation 
> DOM-Traversal 


Der Bereich DOM-Selection beinhaltet vor allem Methoden wie 
document ..querySelectorAll, die Ihnen ermöglichen, DOM-Elemente aufzu- 
stöbern. Mit Hilfe von DOM-Manipulation-Methoden wie classList.add oder 
Eigenschaften wie .innerHTML können Sie diese dann verändern. 
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Wir verwenden die Klassifizierung übrigens auch hinten im Referenz-Anhang, um 
Ihnen das Nachschlagen zu erleichtern. 


11.2 Zusammenfassung 





remove Entfernt einen Knoten aus seinem HTML-Baum. Der Knoten wird 
zurückgegeben und kann weiterverwendet werden. 





Tabelle 11.1 Methoden dieser Lektion 

















parentNode Enthält den Eltern-Knoten des aktuellen Elements. 





Tabelle 11.2 Attribute dieser Lektion 


Beispielzu remove 











HTML-Struktur (vorher): 


<body> 
<ul> 
<li>0</li> 
<li>1</li> 
<li>2</li> 
<li>3</li> 
</ul> 
</body> 


Eee nn 
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JavaScript in der Konsole 








</body> 


11.3 Übungen 
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) Wenn Geschwister eine Reise 


tun: siblings & insertBefore 





Als Letztes wäre es noch schön, wenn es neben dem 
Remove-Button noch 2 Pfeil-Buttons für »hoch« und 
»runter« gäbe, um das jeweilige Produkt zu verschieben. 
Dann könnten wir mit dem Prototyp erst mal experi- 
mentieren und entscheiden, ob wir diese Funktionalität 
tatsächlich so im Endprodukt haben möchten. 





Products 















8-Bit Legendary Hero Heat-Change Mug 























Powerstation 5- E. Maximus Chargus 44.95 X T I 
3Doodler 3D Printing Pen 29.99 x IN] 
€ srice ! Add 


Abb. 12.1 Produktmanager: Hoch&Runter-Feature 











Zum Ergänzen der beiden neuen Buttons erweitern Sie die Funktion 
tdWithRemoveButton und benennen sie am besten auch gleich um, da sie 
danach mehr als nur den Remove-Button erzeugt — in tdWithActionButtons. 


@% const tdWithActionButtons = () => { 

const td = document. createElement("td"); 
td.appendChild(removeButton()); 
td.appendChild(moveUpButton()); 

; td.appendChild(moveDownButton()); 

6 return td; 





Die Buttons erzeugen Sie nach dem bekannten Schema: 


const moveUpButton = () => { 
const button = document.createElement("button"); 
button.innerText = "t"; 
button.classList.add("move_product_up"); 
button.on("click", moveProductUp); 
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return button; 

}; 

const moveDownButton = () = { 
const button = document.createElement ("button"); 
button.innerText = "ı"; 
button.classList.add("move_product_down"); 
button.on("click", moveProductDouwn); 
return button; 


}; 


Ja, wir wissen schon, was Sie sagen wollen: zuviel Redundanz durch böses 
Copy&Paste. Natürlich haben Sie recht. Aber darum kümmern wir uns später, da 
wir zuerst noch die Funktionen moveProductUp und moveProductDown imple- 
mentieren müssen. 


Wie sehen nun die eigentlichen Bewegungsfunktionen moveProductUp und 
moveProductDown aus? Auch hier müssen Sie sich zunächst die Produkt-Zeile 
schnappen — mit der existierenden Funktion 
productRowForAction (event.target) ‚die einfach wieder zwei parentNodes 
nach oben wechselt. Speichern Sie sie gleich in einer Variablen: 


const currentProductRow = productRowForAction(event.target); 


Jetzt können Sie diese Produktzeile an einer anderen Stelle wieder einfügen. Dazu 
benötigen Sie die Methode insertBefore. Sie kann ein Element vor einem 
anderen einfügen. Aufrufen müssen Sie die Methode immer auf dem Eltern-Ele- 
ment: 


currentProductRow.parentNode.insertBefore(/* ... */) 


Wo genau soll das Element eigentlich hin? 


Zum Nach-oben-Bewegen müssen Sie es auf der gleichen Ebene, ein Element 
vor der aktuellen Produktuzeile, einfügen. Elemente der gleichen Ebene heißen 
Geschwister (engl. siblings). Das Geschwister-Element vor dem aktuellen ist dann 
der previousElementSibling (vorheriges Geschwister-Element). In Code 
bedeutet das: 


©" currentProductRow.parentNode. insertBefore( 
currentProductRow, 
currentProductRow.previousElementSibling); 






Das sieht etwas kompliziert aus, ist es aber nicht. Lesen Sie die Anweisung als: 


Ausgehend vom Parent (current ProductRow. parentNode — das ist hier der 
tbody) — füge die zu verschiebende Produktzeile ( current ProductRow) vordem 
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vorhergehenden Geschwister-Element 
(eurrentProductRow.previousElementSibling)ein. 


Damit erhalten Sie folgende Funktion: 


“U const moveProductUp = event = { 

const currentProductRow = productRowForAction(event.target); 

currentProductRow.parentNode.insertBefore( 
currentProductRow, 
currentProductRow.previousElementSibling); 





}; 


Jetzt lässt sich das Produkt nach oben schieben — hurra! Probieren Sie es aus. 


moveProductDown ist auch kein Kunststück mehr. Sie benötigen das Attribut 
nextElementSibling.Leider gibt es ein kleines Problem. Das nächste Geschwis- 
ter-tr von 3Doodler-tr ist die Powerstation. Wenn Sie den 3Doodle mit 
insertBefore vor der Powerstation einfügen (before next in Abb. 12.2), haben Sie 
nichts verändert! 






























Click 
- - „before next 
Doodler 3D Printing Pen 29.99 x t 5 
ASIEN wat (URN 5- E. Maximus Chargus 44.95 Re en ö PR 
s e before next next 
ne | B-Bit Legendary Hero Heat-Change Mug | 6.99 x f 
next next Sibling " ü J 








Abb. 12.2 moveProductDown mit insertBefore auf 
.nextElementSibling.nextElementSibling 


Sie müssen den 3Doodler stattdessen vor dem übernächsten tr (before next next 
in Abb. 12.2), der 8.Bit...Mug, einfügen: 


const moveProductDown = event => { 
const currentProductRow = productRowForAction(event.target); 
currentProductRow. parentNode. insertBefore( 
currentProductRow, 
currentProductRow.nextElementSibling.nextElementSibling); 


I 


Hier ist nochmal alles im Überblick: 


use strict"; 


{ 
const init= () >11 
addExistingProducts (PRODUCTS); 
$("#add_product").on("click", addProductFromInput); 


’ 





const addExistingProducts = () => PRODUCTS. forEach(addProduct); 
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ceonst addProductFromInput = () = 
addProduct ({ 
name: $("#new_product .name").value, 
price: $("#new_product .price").value 


r); 


const addProduct = product => 
$("#products > tbody").appendChild( 
teil 
td(product.name), td(product.price), tdWithActionButtons() 


const tdWithActionButtons = () => { 
const td = document.createElement ("td"); 
td.appendChild(removeButton()); 
td.appendChild(moveUpButton()); 
td.appendChild(moveDownButton()); 
return td; 


Fr 


const removeButton = () > { 
const button = document.createElement ("button"); 
button. textContent = "x"; 
button. classList.add("remove_product"); 
button.on("click", removeProduct); 
return button; 


3 


const movelpButton = () => { 

const button = document.createElement ("button"); 
button. textContent = "+"; 
button.classList.add("move_product_up"); 
button.on("click", moveProductUp); 

return button; 


}; 


const moveDownButton = () => { 
const button = document. createElement("button"); 
button. textContent = "ı"; 
button.classList.add("move_product_down"); 
button.on("click", moveProductDown) ; 
return button; 


Y; 


const removeProduct = event => 
productRowForAction(event.target).remove(); 


const moveProductUp = event => { 
const currentProductRow = productRowForAction(event.target); 
currentProductRow.parentNode.insertBefore( 
currentProductRow, 
currentProductRow.previousElementSibling); 


$ 


const moveProductDown = event => { 
const currentProductRow = productRowForAction(event.target); 
currentProductRow.parentNode. insertBefore( 
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currentProductRow, 
currentProductRow.nextElementSibling.nextElementSibling); 


}; 


const productRowForAction = button => 
button.parentNode.parentNode; 


const td = text > { 
const tdNode = document.createElement("td"); 
tdNode.textContent = text; 
return tdNode; 

ie 


const tr =tds > { 
const trNode = document.createElement("tr"); 
tds. forEach(td => trNode.appendChild(td)); 
return trNode; 

}; 





init(); 
im; 


Codebeispiel 12.1 additional_fles/ 12/examples/product_manager_5_move/product_manager.js 


Ganz schön lang, nicht wahr? 


12.1 _ Allerliebstes Refactoring 


Zumindest die Redundanzen sollten Sie noch entfernen. Alle drei Button-Funktio- 
nen sind nach dem gleichen Schema aufgebaut: 


const removeButton = () => { 
const button = document.createElement ("button"); 
button. textContent = "x"; 
button.classList.add("remove_product"); 
button.on("click", removeProduct); 
return button; 

} 

const moveUpButton = () => { 
const button = document. createElement("button"); 
button. textContent = "t"; 
button. classList.add("move_product_up"); 
button.on("click", moveProductUp); 
return button; 

+}; 

const moveDownButton = () => { 
const button = document.createElement("button"); 
button. textContent = "ı"; 
button. classList.add("move_product_down"); 
button.on("click", moveProductDown); 
return button; 


E 


Definieren Sie eine Funktion buildButton,, die die Unterschiede vereinheitlicht: 
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const buildButton = (symbol, cssClass, action) => { 
const button = document. createElement ("button"); 
button.textContent = symbol; 
button.classList.add(cssClass); 
button.on("click"”, action); 
return button; 


}; 
Sie können alle drei Buttons mit der neuen Funktion erzeugen: 


const removeButton = () => 

buildButton("x", "remove_product", removeProduct); 
const moveUpButton = () => 

buildButton("t", "move_product_up", moveProductUp); 
const moveDownButton = () => 

buildButton("ı", "move_product_down", moveProductDown); 


Der Code ist nicht nur kürzer — Sie können auf einen Blick erkennen, wie sich die 
drei Buttons tatsächlich voneinander unterscheiden. 


Auch die beiden move -Funktionen unterscheiden sich nur minimal. Der einzige 
Unterschied ist der Zugriff auf die Geschwister-Elemente, um die Richtung festzu- 
legen. Ziehen Sie die Unterschiede heraus: 


const moveProductUp = event => moveProduct(event, up); 
const moveProductDown = event => moveProduct(event, down); 
const moveProduct = (event, direction) = { 
const currentProductRow = productRowForAction(event.target); 
currentProductRow.parentNode. insertBefore( 
ceurrentProductRow, direction(currentProductRow)); 
}; 


const down = el => el.nextElementSibling.nextElementSibling; 
const up = el => el.previousElementSibling; 


Insgesamt sieht der verbesserte Code nun so aus: 


"use strict"; 





eonst init= () >{ 
addExistingProducts (PRODUCTS); 
$("#add_product").on("click", addProductFromInput); 


() => PRODUCTS. forEach (addProduct); 


ii 


const addExistingProducts 


const addProductFromInput = () => 
addProduct ({ 
name: $("#new_product .name").value, 
price: $("#new_product .price").value 
P; 
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const addProduct = product => 
$("#products > tbody").appendChild( 
tr([ 
td(product.name), td(product.price), tdwithActionButtons() 
») 
Y: 


const tdWithActionButtons = () > { 
const td = document. createElement("td"); 
td.appendChild(removeButton()); 
td.appendChild(moveUpButton()); 
td.appendChild(moveDownButton()); 
return td; 


}; 


const removeButton = () => 

buildButton("x", "remove_product", removeProduct); 
const moveUpButton = () => 

buildButton("+", "move_product_up", moveProductUp); 
const moveDownButton = () => 

buildButton("ı", "move_product_down", moveProductDown); 


const removeProduct = event => 
productRowForAction(event.target).remove(); 

const moveProductUp = event => moveProduct(event, up); 

const moveProductDown = event => moveProduct(event, down); 


const moveProduct = (event, direction) => { 
const currentProductRow = productRowForAction(event.target); 
currentProductRow.parentNode.insertBefore( 
currentProductRow, direction(currentProductRow)); 
h, 


const down = el => el.nextElementSibling.nextElementSibling; 
const up = el => el.previousElementSibling; 


const productRowForAction = button => 
button.parentNode.parentNode; 


const buildButton = (symbol, cssClass, action) => { 
const button = document. createElement("button"); 
button.textContent = symbol; 
button.classList.add(cssClass); 
button.on("click", action); 
return button; 

I 


const td = text => { 
const tdNode = document.createElement("td"); 
tdNode.textContent = text; 
return tdNode; 


Er 


const tr = tds > { 
const trNode = document.createElement("tr"); 
tds. forEach(td => trNode.appendChild(td)); 
return trNode; 
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Codebeispiel 12.2 additional_fles/ 12/examples/product_manager_6_move_refact/product_manager.s 


12.2 _Uups — das geht noch besser! 





Mir istnoch ein kleiner Glitch aufgefallen. Ich kann beim 
ersten Produkt auf den »Nach-oben«-Button drücken. 
So sieht das Ergebnis aus; 





3Doodler 3D Printing Pen 29.99 x Et 











| | Powerstation 5- E. Maximus Chargus 44.95 x Ei 

















 |8-Bit Legendary Hero Heat-Change Mug | 6.99 x | m 





Genauso wenig Sinn macht es, beim letzten Produkt auf 
den »Nach-unten«-Button zu drücken. Könnten Sie die 
entsprechenden Buttons nicht einfach deaktivieren? 











Stimmt, eigentlich sollten diese Buttons gar nicht aktiv sein. Ein kleine Funktion 
schafft hier Abhilfe. 


const disableNonFunctionalButtons = () => 
$$("#products > tbody > tr").forEach(tr => { 
tr.querySelector(".move_product_up").disabled = 
!tr. previousElementSibling; 
tr.querySelector(".move_product_down").disabled = 
r.nextElementSibling; 


Hi 








Das ist nun im Grunde nichts Neues. Das forBach durchläuft alle Tabellenzeilen 
(tr) und schaltet die Rauf-/runter-Buttons in den richtigen Zustand. Der einzige 
Trick ist es, herauszufinden, was denn der richtige Zustand ist. Hat eine Zeile keinen 
Vorgänger ( !tr.previousBlementSibling), so muss sie die oberste Zeile sein. 


Dementsprechend ist der Button für »Nach oben« 
(tr.querySelector (".move product up")) in dieser Zeile zu deaktivieren 
(.disabled = true). Hat die Zeile jedoch einen Vorgänger, so gibt 


!tr.previousElementSibling den Wert false zurück. Sie setzen also das 
Attribut disabled auf false. Der Button bleibt (oder wird) aktiv. 


Der »Nach-unten«-Button lässt sich genauso deaktivieren bzw. aktivieren. 
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Jetzt muss die Funktion nur noch aufgerufen werden. Wann ist der beste Zeit- 
punkt? 


Idealerweise immer, nachdem der Anwender einen der Buttons betätigt hat. 


Aufruf in der Tabelle 


Für die Buttons +, ı und x hängen Sie die Funktion 
disableNonFunctionalButtons einfach zusätzlich ans jeweilige Click-Event in 
der buildButton-Funktion. Das zweite on in Zeile 5 registriert 
disableNonFunctionalButtons als zweiten Event-Handler auf dem click- 
Event (Chaining). Beide Funktionen werden beim Auftreten des Events ausgeführt. 







N const buildButton = (symbol, cssClass, action) => { 
const button = document.createElement("button"); 
button.innerText = symbol; 
button.classList.add(cssClass); 

| button.on("click", action).on("click", 
disableNonFunctionalButtons); 

return button; 


}i 
2 


ab; 


jeder Klick auf einen von buildButton erzeugten Button ruft 
disableNonFunctionalButtons auf. Somit kann der Anwender einen beliebi- 
gen Button eines beliebigen Produktes betätigen und es bleibt sichergestellt, dass 
alle Buttons in den richtigen Zustand wechseln. 


Aufruf nach dem Hinzufügen neuer Produkte 


Um auch einen korrekten Zustand nach dem Hinzufügen neuer Produkte zu 
haben, sollten Sie die Funktion noch am Ende von addProduct einfügen: 


U const addProduct = product => { 
$("#products > tbody").appendChild( 
tr(l 
td(product.name), td(product.price), tdWwithActionButtons() 
]) 
% 
disableNonFunctionalßuttons(); 





Wie immer der komplette Code zur Übersicht: 


"use strict"; 


{ 







const init= () >11 
addExistingProducts (PRODUCTS); 
$("#add_product").on("click", addProductFromInput); 
er 
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= 





const addExistingProducts = () => PRODUCTS. forEach(addProduct); 


const addProductFromInput = () => 
addProduct({ 

name: $("#new_product .name").value, 
price: $("#new_product .price").value 


2); 


const addProduct = product => { 
$("#products > tbody"”).appendChild( 
trl} 
td(product.name), td(product.price), tdWithActionButtons() 
1) 
); 
disableNonFunctionalButtons(); 


}; 


const tdWithActionButtons = () => { 
const td = document.createElement ("td"); 
td.appendChild(removeButton()); 
td.appendChild(moveUpButton()); 
td.appendChild(moveDownButton()); 
return td; 

}; 


const removeButton = () => 

buildButton('"x", "remove_product", removeProduct); 
const movelpButton = () => 

buildButton("r", "move_product_up", moveProductUp); 
const moveDownButton = () => 

buildButton("ı", "move_product_down", moveProductDown) ; 


const removeProduct = event => 
productRowForAction(event.target).remove(); 

const moveProductUp = event => moveProduct(event, up); 

const moveProductDown = event => moveProduct(event, down); 


const moveProduct = (event, direction) => { 
const currentProductRow = productRowForAction(event.target); 
currentProductRow.parentNode.insertBefore( 
eurrentProductRow, direction(currentProductRow)); 


h; 


const down = el => el.nextElementSibling.nextElementSibling; 
const up = el => el.previousElementSibling; 


const productRowForAction = button => 
button.parentNode.parentNode; 


const buildButton = (symbol, cssClass, action) = { 
const button = document.createElement ("button"); 
button.textiContent = symbol; 
button.classList.add(cssClass); 
button.on("click", action).on("click", 

sableNonFunctionalButtons); 
return button; 

}; 
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const disableNonFunctionalßuttons = () => 
$$("#products > tbody > tr").forEach(tr => { 

. tr.querySelector(".move_product_up").disabled = 

!tr.previousElementSibling; 





oo tr.querySelector(".move_product_down").disabled = 
Itr.nextElementSibling; 
5 


+5 





const td = text > { 
const tdNode = document.createElement ("td"); 
tdNode.textContent = text; 
return tdNode; 

}; 

eonst ir - tds. —Et 
const trNode = document.createElement("tr"); 
tds.forEach(td => trNode.appendChild(td)); 


return trNode; 
}; 


init(); 


Codebeispiel 12.3 additional_hles/ 12/examples/product_manager_7_move_disabled_buttons/pro- 
duct_manager.js 


12.3 Zusammenfassung 


Beschreip! 


insertBefore | Fügt einen übergebenen Knoten (erstes Argument) vor einem 


anderen Knoten (zweites Argument) ein. Ausgegangen wird 
dabei von dem Elternknoten, auf dem die Methode aufgerufen 
wurde. 





Tabelle 12.1 Methoden dieser Lektion 


previousElementSibling | Enthält das vorhergehende Geschwisterelement 


nextElementSibling Enthält das nachfolgende Geschwisterelement 





Tabelle 12.2 Attribute dieser Lektion 
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12.3.1 Beispielzu insertBefore 


sen 





HTML-Struktur (vorher): 


<body> 
<ul> 
<li>0@</li> 
<li>1</li> 
<li>2</li> 
<Li>3</li> 
</ul> 
</body> 


JavaScript in der Konsole 


const li = document.create("1li"); 
li.textContent = "4"; 
$("ul").insertBefore($$("ul > 1i")[2], li); 


HTML-Struktur (nachher): 


<body> 
<ul> 
<li>0</li> 
<li>Is/li> 
<li>4</li> 
<li>2</li> 
<li>3</li> 
</ul> 
</body> 
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12.3.2 DOM-Traversal 


Um sich innerhalb des DOM von einem Element zum anderen zu bewegen (traver- 
sal), sind verschiedene Attribute nötig. Diese Übersicht zeigt die wichtigsten Attri- 
bute anhand von Codebeispiel 12.4. 


Alle in Tabelle 12.3 bzw. Abb. 12.3 aufgelisteten Attribute sind read-only. Sie kön- 
nen zwar anhand der Attribute im DOM navigieren, aber keine Veränderungen an 
der Baumstruktur durchführen. 





parentNode 


| der Elternknoten 








children 


childElementCount 


alle Kindelemente 





Anzahl der Kindelemente 





MH 


firstElementChild 
GER 


ii | 


das erste Kindelelement 





lastElementChild 
reviousElementSibling 


extElementSibling 





ee | 
ee 


Kissen SE babe 


das letzte Kindelelement 


das vorhergehende Geschwisterelement 





das nächste Geschwisterelement 





Tabelle 12.3 Diese Tabelle zeigt die wichtigsten Möglichkeiten zum DOM-Traversal (Bewegung innerhalb 


des DOMs) 


Beispiele 


<body> 
<ul> 
<li>0</li> 
<li>1</li> 
<1l1i>2</li> 
<li>3</li> 
</ul> 
</body> 


Codebeispiel 12.4 HTML-Beispiel einer einfachen unordered list 
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DOM-Traversal 





nn. 
lastElementChild 
un 





Abb. 12.3 DOM-Traversal-Attributes zu Codebeispiel 12.4 


document.body // => <body>....</body> 
document.body.children // => I[<ul>...</ul>] 
document.body.childElementCount // => ® 

$('ul') /I => <sul>...‚</ul> 
$('ul’).parentNode // => <body>...</body> 


$l'ul').firstElementChild // => <li>0</li> 
$('ul').lastElementChild // => <li>3</li> 
$('ul’).childElementCount // => 4 

$('ul').children // => [<li>@</li>, ..., <li>3</li>] 


$$(!li ) [1] // => <li>1</li> 
$$('li')[1].parentNode /1 => <ul>...</ul> 
$$('li')[1].previousElementSibling // => <li>0</li> 
$$('li')[1].nextElementSibling /1 => <li>2</li> 


Literaturhinweis 


Die in den letzten Lektionen beschriebenen Techniken, 
um Elemente im DOM zu manipulieren, wurden vor 
allem durch das Buch DOM Scripting (Keith 2005) von 
Jeremy Keith bekannt. Es erschien 2005 und ritt damit 
auf dem Höhepunkt der Ajax-Hype-Welle. Es demons- 
trierte sehr eindrucksvoll, wie sich mit sauberem und 
standardkonformem Code moderne Anwendungen 
entwickeln lassen — ein Novum zur damaligen Zeit. 
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12.4 Übungen 


ar dieses Mal: icht am Ende < der Liste ein, son- 
FE Me Ceramic. 


24: Cutyeat 


Cutest Cats 





Chonse the cutest cats. Pick three winners! 


Der Katzenfreundeverein Cutycat hat einen Auftrag für Sie. Der Verein 

_ möchte auf seiner Website einen Wettbewerb ausrichten. Die Seite zeigt eine 
Reihe von Katzen, aus denen ein Besucher Pen: die drei niedlichsten aus- 
Wahlen soll. 


I erwenden Sie das HTML und CSS aus dem Begleitmaterial. Sobald ein 
Besucher auf eine der Katzen klickt, soll diese auch in der rechten Box 
(Cutest Cats) erscheinen. Sie ar aber aus der Liste der Katzen (Our a 
nicht verschwinden! 
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12.4 Übungen 
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< Anhang A: Referenz 








Diese Referenz fasst die Browser-APls zusammen, soweit dieser Kurs sie vermittelt. 
Auf selten benötigte oder zu komplexe Eigenschaften & Methoden haben wir 
bewusst verzichtet. 


Verwenden Sie diese Referenz als Nachschlagewerk für Ihre Übungen. Wir hoffen, 
dass sie Ihnen auch später bei der täglichen Arbeit eine Hilfe ist. Sobald Sie die 
Namen der grundlegenden Methoden, Attribute und Interfaces aber halbwegs 
kennen, macht es vermutlich mehr Sinn, auf eine Online-Referenz wie devel- 
oper.mozilla.org oder www.webplatform.org umzusteigen. Falls Sie wissen möch- 
ten, ab welchen Browserversionen eine bestimmte Funktionalität zur Verfügung 
steht, empfehlen wir Ihnen caniuse.com. 





Mein Tipp 


Benutzen Sie die Referenz nicht nur als Nachschlage- 
werk. Lesen Sie die Referenz einfach mal bei Gelegen- 
heit — wie eine Sonntagszeitung oder den aktuellen 
Twitter-Feed. 


Lesen Sie nicht unbedingt hochkonzentriert und fokus- 
siert, sondern einfach zum Entspannen. Stellen Sie sich 
dabei vor, was Sie mit den Attributen und Methoden für 
spannende Dinge programmieren könnten. Und bei 
Gelegenheit: Lesen Sie die Referenz nochmal. 








Auf diese Weise prägen Sie sich die wichtigsten Dinge 
quasi »im Vorbeigehen« ein, und Sie haben alles schon 
einmal gesehen. Falls Sie dann später z.B. eine 
bestimmte Methode benötigen, fällt Ihnen sofort wie- 
der ein, dass es da etwas Passendes gibt. 


Referenzen zu lesen, muss wirklich nicht »trocken« sein. 
Als ich mit 12 mein erstes Programmierbuch las (das 
Basic-Handbuch für den Commodore C64), hab’ ich den 
Referenzteil geradezu »verschlugen«. Bei jeder neuen 
Funktion hab' ich davon geträumt, welche großartigen 
Dinge ich mal damit programmieren würde. 
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13.1 Elemente 


Hinweis: Die im DOM zur Verfügung stehenden Methoden stammen aus verschie- 
denen Interfaces/APIs. Diese Herkunfts-APls sind in den folgenden Referenztabel- 
len jeweils mit aufgeführt. Das hat rein dokumentarische Gründe. Sie können bei 
der entsprechenden API nachlesen, welche Methoden nun genau zur Verfügung 
stehen. 


13.1.1 Element vs. Node 


Das DOM unterscheidet zwischen Knoten (Node) im Allgemeinen und speziellen 
Knotentypen, wie Element-Knoten (Element), Text-Knoten, Kommentar-Knoten 
usw. Für die Praxis sind normalerweise nur die Element-Knoten relevant. Daher 
konzentriert sich unser Kurs auf diese. Falls Sie sich doch für weitere, eher selten 
benötige Knotentypen interessieren, finden Sie unter nodeType im MDN"' eine Auf- 
listung mit Erläuterungen. 


Da ein Element-Knoten (Element) eine Spezialisierung eines Knotens (Node) dar- 
stellt, stehen Ihnen auf dem Element-Knoten neben den Element-Eigenschaften 
(z.B. children) auch alle Node-Eigenschaften (z.B. parentNode) zur Verfügung. 
Im Normalfall können Sie den Unterschied ignorieren. 


13.1.2 Der Document-Knoten 


Der document -Knoten ist ebenfalls ein Spezialfall eines Knotens. Er repräsentiert 
das komplette HTML-Dokument und stellt einige zusätzliche Methoden wie 
createElement bereit. 


Die Methoden querySelector und querySelectorAll lassen sich auf 
document global und auf einzelnen Elementen lokal verwenden. Global heißt, 
der Selektor durchsucht das gesamte Dokument. Lokal bedeutet, dass nur die 
Nachfahren (d.h. Kinder, Enkel usw.) des entsprechenden Element-Knotens zur 
Suche herangezogen werden. 





41. https://developer.mozilla.org/en/docs/Web/API/Node/nodeType 
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13.1.3 DOM Selection 


querySelector 








Gibt das erste Element zurück, 
das zum angegeben Selektor 
passt. Durchsucht nur Ele- 
mente innerhalb des HTML- 
Teilbaums, auf dessen Wurzel- 
element querySelector auf- 
gerufen wurde. 


Element 


— 





HF 


querySelectorAll 


document.querySelector 


(aka $) 


(aka $$) 





Gibt alle Elemente zurück, die 
zum angegeben Selektor pas- 
sen. Durchsucht nur Elemente 
innerhalb des HTML-Teilbaums, 
auf dessen Wurzelelement 
querySelectorAll aufgeru- 
fen wurde. 


Gibt das erste Element zurück, 
das zum angegeben Selektor 
passt. Durchsucht das gesamte 


zum angegeben Selektor pas- 
sen. Durchsucht das gesamte 





Element 


Document 


HTML-Dokument. 
document.querySelectorAll | Gibt alle Elemente zurück, die Document 





HTML-Dokument. 


Tabelle 13.1 Diese Tabelle zeigt die wichtigsten Methoden zur Selektion von DOM-Elementen. Weitere 
finden Sie im MDN“? bei den Beschreibungen der entsprechenden APIs: Element“? & Document”*. 





42. https://developer.mozilla.org 


43. https://developer.mozilla.org/en-US/docs/Web/API/Element 
44. https://developer.mozilla.org/en-US/docs/Web/API/Document 
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document.head Gibt das head-Element zurück. Document 












document.body 


Gibt das body-Element zurück. Document 








Tabelle 13.2 Diese Tabelle zeigt die wichtigsten Attribute zur Selektion von DOM-Elementen. Weitere 
finden Sie im MDN”® bei den Beschreibungen der Document-API. 


CSS Selektoren 





Universal | * Selektiert ein beliebiges Element. Diesen Selektor 
selector sollten Sie nicht ohne weitere Einschränkungen 
verwenden, da das Selektieren aller Elemente 
einer Website sehr viel Rechenzeit in Anspruch 


nehmen kann. 











Type h1 Selektiert alle Elemente eines bestimmten Typs. 
selector 

ID selec- | #some-id Selektiert genau ein Element mit der gegebenen 
tor id. 

Class „some-class | Selektiert alle Elemente, denen die angegebene 
selector Klasse zugewiesen wurde. Beachten Sie, dass ein 


Element mehrere Klassen haben kann. 











- hl, p, »90 | Das Komma ist selbst kein Selektor, sondern 
erlaubt es, mehrere Selektoren zu kombinieren. Im 


Beispiel würden alle n1-Elemente, alle p-Elemente 


und alle Elemente mit der Klasse go selektiert. 


Tabelle 13.3 Basis CSS3-Selektoren 

















45.  https://developer.mozilla.org 
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I 


lattr] [sre] Selektiert Elemente mit dem angege- 
benen Attribut. Der Attributwert 
spielt dabei keine Rolle (attribute 
presence). 
| — 
[attr=val] [src="funny_cat.png'] | Selektiert Elemente, die das angege- 


bene Attribut (src) mit genau dem 
angegebenen Wert (funny_cat.png) 
enthalten (exact attribute match). 








[attr*=val] | [src#*=cat] 


[attrA=val] | Isrc”=funny] 


[attr$=val] | [src$=pnol 





Selektiert Elemente, bei denen das 
angegebene Attribut (src) den Wert 
(cat) als Teilstring enthält (substring 
attribute match). 


Selektiert Elemente, bei denen das 
angegebene Attribut (src) mit dem 
Wert (funny) beginnt. 


Selektiert Elemente, bei denen das 
angegebene Attribut (src) auf den 
angegebenen Wert (png) endet. 


Tabelle 13.4 CSS attribute selectors. All examples select <img src="funny_cat.png"... /> 


<!DOCTYPE html> 
<html lang="en"> 


<head> 
<meta 


<title>Selector Testing</title> 


</head> 


<body> 


charset="utf-8" /> 


zul id="ull"> 
id="1lil1"><span>11</span></li> 


<li 
<li 
<Er 
<iE 
</ul> 


id="1112">12</li> 
id="1113">13</li> 
id="1114">14</li> 


<ul id="ul2"> 
<li id="1121"><span>21</span></li> 
<li id="1122"><strong><span>22</span></strong></li> 


<li 


id="1123'">23</li> 
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</ul> 
</body> 


</html> 


Codebeispiel 13.1 additional_fles/02/examples/selector_testing.html 





Descendant li span Selektiert Elemente (hier span), die die Nachfah- 
combinator ren eines anderen angegebenen Elements (hier 
(Leerzeichen) 1i) sind — völlig unabhängig davon, wie viele 
Ebenen dazwischen liegen. 

Ergebnis: [<span>11</span>, 
<span>21</span>, <span>22</span>] 








Adjacent li#li1l | Mit diesem Selektor können Sie das Element aus- 
siblingcom- | + Üi wählen, das im HTML-Quelltext direkt nach dem 
binator (+) angegeben Element (hier 1i#1111) auf der glei- 


chen Ebene (Geschwister-Element) folgt. Falls das 
im Dokument nachfolgende Element nicht dem 
hinter dem +-Symbol angegebenen entspricht, 
wird nichts selektiert. 


Ergebnis: [<1i id="1i112">12</1i>] 


Tabelle 13.5 Combinator Selectors — Ergebnisse basieren auf Codebeispiel 13.1 
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General Li#li12 
sibling com- |“ "* 
binator (-) 


wählen, die im Dokument nach dem angegebe- 
nen Element (hier 11#1112) auf der gleichen 
Ebene (Geschwister-Element) folgen. Es wird nicht 
nur das direkt folgende Element gewählt, wie 
beim Next sibling combinator. 

Ergebnis: [<1i id="1i113">13</1i>, <li 
id="1i14">14</1li>] 





- 
Child combi- | li > 
nator (>) span 








Eine Variante der Nachfahren-Selektoren sind die 
Kind-Selektoren, mit denen Sie Elemente auswäh- 
len können, die direkte »Kinder« von übergeord- 
neten Eltern-Elementen sind. 

Im Beispiel werden nur span-Elemente selektiert, 
die sich direkt innerhalb eines 1 i-Elements befin- 
den. <span>22</span> befindet sich in einem 
strong-Element und wird deswegen nicht selek- 
tiert. 

Ergebnis: [<span>11</span>, 
<span>21</span>] 





Tabelle 13.5 Combinator Selectors — Ergebnisse basieren auf Codebeispiel 13.1 























an 


first-child ul li:first- 
child 


ınth-child(x) ul lisnth- 
child(5) 


:last-child ul li:last- 
child 


L L 











I —— — | 


























nn 


Mit dieser Pseudo-Klasse sprechen Sie das erste 
Kind-Element eines übergeordneten Containers 
(hier: ul) an, falls es sich um ein Element vom 
angegeben Tag-Typ (hier: 11) handelt. 

Sollte das erste Kindelement nicht den richtigen 
Tag-Typ haben, wird nichts selektiert. 


Die Pseudo-Klasse spricht das x-te Kind-Element 
an — im Beispiel das fünfte Element innerhalb 
von ul, falls es vom Tag-Typ 11 ist. 


Äquivalent zu : first-child selektieren Sie hier 
das letzte Kind-Element, sofern es vom richtigen 
Tag-Typ ist. 








Tabelle 13.6 Pseudo Classes 





13.1 Elemente 























Tabelle 13.6 Pseudo Classes 


:only-child #article Diese Klasse selektiert ein Element nur, wenn es 
p:only- sich um das einzige Kind eines angegebenen 
child Eltern-Elementes handelt. 
‚empty div:empty | Mit dieser Pseudo-Klasse sprechen Sie nur Ele- 
mente an, die ohne Kind-Elemente sind. Inhalt in 
Form von Text wird dabei ebenfalls als Kind-Ele- 
ment betrachtet. 
| | | 

:not(selector) | :not(span) | Negation. Wählt Elemente aus, wenn sie nicht 
dem in Klammern angegebenen Selektor ent- 
sprechen. Im Beispiel würde alles außer span-Ele- 
menten ausgewählt. 












13.1.4 DOM Manipulation 











insertBefore 








appendChild | Hängt einen übergebenen Knoten (z.B. ein Ele- Node 
ment) als letztes Kind an den Elternknoten an, 
auf dem die Methode aufgerufen wurde. 

Falls der angehängte Knoten bereits Teil des 
Dokuments war, wird er von seiner ursprüngli- 
chen Position entfernt. 


Fügt einen übergebenen Knoten (erstes Argu- Node 
ment) vor einem anderen Knoten (zweites Argu- 
ment) ein. Ausgegangen wird dabei von dem 
Elternknoten, auf dem die Methode aufgerufen 


wurde. 
remove Entfernt einen Knoten aus seinem HTML-Baum. ChildNode 


Der Knoten wird zurückgegeben und kann wei- 
terverwendet werden. 


un EEE BE 


















Tabelle 13.7 Diese Tabelle zeigt die wichtigsten Methoden zur Manipulation von DOM-Elementen. 
Weitere finden Sie im MDN“® bei den Beschreibungen der entsprechenden APIs: Node & ChildNode. 





46. https://developer.mozilla.org 
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13.1.5 


Um sich innerhalb des DOM von einem Element zum anderen zu bewegen (traver- 
sal), sind verschiedene Attribute nötig; dieser Referenzteil zeigt die wichtigsten. 


Alle in Tabelle 13.8 bzw. Abb. 13.1 aufgelisteten Attribute sind read-only. Sie kön- 
nen zwar anhand der Attribute im DOM navigieren, aber keine Veränderungen an 
der Baumstruktur durchführen. 


DOM Traversal 











| 


ment 


parentNode der Elternknoten Node 
children alle Kindelemente parentNode 
| childElementCount Anzahl der Kindele- | parentNode 
mente 
firstElementChild das erste Kindelele- | parentNode 








lastElementChild 





nextElementSibling 








Tabelle 13.8 Diese Tabelle zeigt die wichtigsten Attribute zum DOM-Traversal (Bewegung innerhalb des 
DOMS). Weitere finden Sie im MDN"’ bei den Beschreibungen der entsprechenden APIs. 


das letzte Kindelele- 
ment 


E 


Geschwisterelement 












das nächste 
Geschwisterelement 


arentNode 


previousElementSibling | das vorhergehende NonDocumentTypeChildNode 


NonDocumentTypeChildNode 





47. https://developer.mozilla.org 
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DOM-Traversal _- 







firstElementChild 





previousElementSibling” 


Abb. 13.1 DOM-Traversal-Attributes 


13.1.6 DOM Creation 
cloneNode Kopiert einen Knoten und gibt die Node 


Kopie zurück. cloneNode (true) 
kopiert auch alle Kindknoten mit. 


document.createElement | Erzeugt ein Element vom angegebe- | Document 
nen Typ 





Tabelle 13.9 Diese Tabelle zeigt die wichtigsten Methoden zur Erzeugung (Creation) von DOM-Elementen. 
Weitere finden Sie im MDN*® bei den Beschreibungen der entsprechenden APIs. 





48. https://developer.mozilla.org 





182 13 Anhang A: Referenz 



























innerHTML | Gibt das HTML im Inneren eines Elementes zurück — | Element 
der Wert kann auch verändert werden. 
r 
textContent | Gibt den Text (ohne HTML-Tags) zurück, der sich im | Node 
HTML-Element befindet — der Wert kann auch ver- 
ändert werden. 
L- 





Tabelle 13.10 Diese Tabelle zeigt die wichtigsten Attribute zur Erzeugung (Creation) von DOM-Elementen. 
Weitere finden Sie im MDN*® bei den Beschreibungen der entsprechenden APIs. 


13.2 Attribute 


alt area, img, Alternativer Text, z.B. falls ein Bild nicht dar- 
input gestellt werden kann. 


checked input Gibt an, ob ein Radiobutton gewählt oder 


eine Checkbox angehakt ist. 


cols textarea Anzahl der Spalten 


disabled button, Gibt an, ob ein Element deaktiviert ist. 
input, 
option, 
select, 
textarea 


href a, link Die URL einer verlinkten Ressource 





Tabelle 13.11 Ein Auswahl von Attributen, die in der Praxis öfter mit JS angesprochen werden. Eine 


vollständige Liste aller Attribute finden Sie in der MDN Attribut reference”. 


En En 
49.  https://developer.mozilla.org 
50. https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes 
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max progress, Der Maximalwert — bei input-Elementen ist 
input das nur für type="number" und 
type="range" sinnvoll. 





maxlength | input, Maximal erlaubte Zeichen in einem Element 


textarea 
min input Der Minimalwert — bei input-Elementen ist 


das nur für type="number" und 
type="range" sinnvoll. 














multiple input, Erlaubt bei true mehrere Eingaben für 
select input type="email" oder input 
type="file".Beiselect können mit strg/ 
cmd mehrere Optionen gewählt werden. 














name button, Name des Elements. Dieses Attribut wird 
form, hauptsächlich für serverseitige Anwendun- 
fieldset, gen zur Identifizierung genutzt. 
input, 
select, 
textarea 

placeholder | input, Voreingestellter Text, der dem Anwender 
textarea einen Hinweis zu den erwarteten Eingaben 

gibt. 

readonly input, Gibt an, ob ein Element bearbeitet werden 
textarea kann. 

rel a, link Definiert die Beziehung zwischen dem Ziel- 


und dem Link-Objekt. Kann auch für eigene 
Beziehungstypen verwendet werden, z.B. 
interne Links für eine JS-Bildergalerie. 


required input, Gibt an, ob ein Element ein Pflichtfeld dar- 
select, stellt. 
textarea 





Tabelle 13.11 Ein Auswahl von Attributen, die in der Praxis öfter mit JS angesprochen werden. Eine 
vollständige Liste aller Attribute finden Sie in der MDN Attribut reference. 
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rOWS 








textarea 





Anzahl der Zeilen 





selected 


option 


Gibt an, ob eine option selektiert ist. 








size 


select 







Anzahl der sichtbaren Optionen bei einer 
select-BoX 


URL der Bilddatei 








Definiert die Startnummer einer Liste, wenn 
etwas anderes als 1 gewünscht ist. 





step 


tabindex 


value 














input 


auf allen Ele- 
menten mög- 


lich Hilfe der Tab-Taste. 
Kleine Text-Box (Tooltip), die beim »Hover« 


title 


auf allen Ele- 
menten mög- 
lich 


button, 
input 


button, 
option, 
input, 

progress 














Die Schrittweite — bei input-Elementen ist 
das nur für type="number" und 
type="range" sinnvoll. 


Überschreibt die herkömmliche Reihenfolge 
der angesteuerten (Formular-)Elemente mit 


angezeigt wird. 





Typ des Elements 





Wert des Elements 











Tabelle 13.11 Ein Auswahl von Attributen, die in der Praxis öfter mit JS angesprochen werden. Eine 
vollständige Liste aller Attribute finden Sie in der MDN Attribut reference. 
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13.3 


add 


cs5 


$("#bar").classList.add("foo") 


remove $("#bar").classList.remove("foo") | Entfernt eine Klasse. 





Fügt eine Klasse hinzu. 
Im Beispiel erhält das Element 
mit der id bar die Klasse foo. 


Enfernt im Beispiel die Klasse 
foo von dem Element mit der 
ia bar. 





item 





toggle 


contains 





$("#bar").classList.item(2) 


$("#bar").classList.toggle("foo") 





$("#bar").classList.contains("foo") 














Gibt eine Klasse aus der Class- 
list anhand des übergebenen 
Index-Arguments zurück. 
Gibt im Beispiel den dritten 
Klassennamen des Elements 
mit der ia bar zurück. 


Entfernt eine Klasse oder fügt 
sie hinzu. 

Im Beispiel wird die Klasse foo 
hinzugefügt, falls das Element 
mit der ia bar noch nicht über 
diese Klasse verfügt. Falls die 
Klasse schon vorhanden ist, 
wird sie entfernt. 






Gibt true zurück, falls die 
angegebene Klasse in der 
Classlist vorhanden ist. 









Tabelle 13.12 Methoden des classList-Interfaces. Ein ausführliche Referenz finden Sie im MDN?' 





51. https:/developer.mozilla.org/en/docs/Web/API/Element/classList 
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style $("#bar").style Enthält die CSS-Stile des Elements als CSSStyle- 
Declaration (änderbar) 
classList | $("#bar").classList | Enthält die Liste der CSS-Klassen als DOMTo- 


kenList (änderbar). 








Tabelle 13.13 Attribute des HTMLElement-Interfaces für CSS-Zugriff. Ein ausführliche Referenz finden Sie 


im MDN?? 


13.4 


Event 
blur 


change 


click 











Events 





















































ein Element den Fokus verliert. 


textarea 


ein Anwender eine Änderung am Element 
bewirkt — z.B. durch Wählen einer Option 
innerhalb einer select-Box oder durch das 
Bestätigen einer Checkbox. Im Gegensatz zum 
input-Event gilt: Bei einem input-Field oder 
einer textarea »feuert« dieses Event erst, 
nachdem das Feld seinen Fokus wieder verliert 
(d.h. die Eingabe als abgeschlossen gilt). 


ein Anwender auf ein Element klickt (und wie- 
der loslässt). Das c1ick-Event repräsentiert 
den kompletten Vorgang: Drücken und Loslas- 
sen. Wenn Sie nur auf das Runterdrücken 
reagieren möchten, verwenden Sie 
mousedown, für nur das Loslassen mouseup. 















input, 


input, 
select, 
textarea 


button, 
img, body, 
p, div 





Tabelle 13.14 Ein Auswahl in der Praxis benötigter Browser-Events. Eine vollständige Liste finden Sie in der 


MDN Event reference”. 


I IIÜÜÜÜÜÜÜÜÜUÜÜÜÖIÜÖÖULÜJÜUÜÜÜIIIIÜÖIDÜÖÜÜÜÜIIIDIIILILLnnn mm nn 


52.  https://developer.mozilla.org/en/docs/Web/API/Element/classList 
53.  https://developer.mozilla.org/en-US/docs/Web/Events 
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dblIclick ein Anwender auf einem Element einen Dop- button, 
pelklick ausführt. img, body 
focus ein Element den Fokus erhält. input, 
textarea 





hashchange | sich der Fragmentbezeichner der URL Inden | window 
(der Fragmentbezeichner ist der Teil, der nach 
dem #-Symbol folgt, inkl. Symbol). 
input der Inhalt eines input- oder textarea-Ele- input, 
ments geändert wird. Im Gegensatz zu textarea 
change feuert dieser Event bei jeder Eingabe 


sofort. Unter jsfiddle.net/AtvtZ/ finden Sie 
einen guten Vergleich von input und change. 


keydown der Anwender eine Taste drückt. input, 


textarea 
keypress der Anwender eine Taste gedrückt hält. input, 


textarea 








keyup der Anwender eine Taste loslässt. input, 
textarea 









mouseenter der Anwender den Mauszeiger über das Ele- button, 
ment bewegt — genauer: die Fläche des Ele- img, body, 
ments mit dem Mauszeiger betritt. p, div 
mouseleave der Anwender den Mauszeiger aus einem Ele- | button, 
ment herausbewegt. img, body, 
p, div 
mousemove sich der Mauszeiger über dem Element button, 
bewegt. img, body, 








p, div 
| | [> 
reset ein Formular zurückgesetzt wird. form 


Tabelle 13.14 Ein Auswahl in der Praxis benötigter Browser-Events. Eine vollständige Liste finden Sie in der 
MDN Event reference. 
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resize der Anwender die Größe des Browserfensters window 
verändert. 
[= I | 
scroll innerhalb eines Elements (oder des Browser- window, 
fensters) gescrollt wird. div 
[BER IM | 
select der Anwender Text markiert. input, 
textarea, p 
submit ein Formular abgeschickt wird. form 
m — + —ı 
transitionend eine CSS-Transition beendet ist. l img, div, p 
| 
visibilitychange | Inhatt eines Elements sichtbar oder unsichtbar | img, div, p 
wird. 
wheel der Anwender am Rad dreht (wir meinen das window, 
wörtlich, nicht im übertragenen Sinn). Norma- | div 
lerweise ist es das Mausrad, aber es kann auch 
ein Trackball oder ein Touchpad sein. 








Tabelle 13.14 Ein Auswahl in der Praxis benötigter Browser-Events. Eine vollständige Liste finden Sie in der 


MDN Event reference. 
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Anhang B: Quellen & Litera- ’ 


turhinweise 





14.1 APA-Style 


Zum Aufzeigen von Referenzen, Quellen und weiterführender Literatur verwen- 
den wir den sogenannten APA-Style. Der APA-Style ist — unter anderem — ein 
System zur Kennzeichnung von Referenzen. Entwickelt wurde das System von der 
American Psychological Association (APA). 


Weitere Informationen dazu finden Sie auf Wikipedia® oder im Online Writing 
Lab°°. Eine APA-Style-Referenz besteht meist aus Nachname und Jahreszahl. Hier 
sehen Sie zwei Beispiele. 


Ein Indiz für die Aussagekraft eines Bezeichners ist auch seine Länge. Variablen, die aus 
nur einem Zeichen bestehen, sind meistens problematisch (Kellerwessel 2002). 


Douglas Crockford (2008) bezeichnet das == sogar als bösen Zwilling. 


Im folgenden Quellenverzeichnis können Sie die Referenzen dann nachschlagen. 


14.2 Quellen 


Crockford D. (2001). JavaScript: The World's Most Misunderstood Programming 
Language. Douglas Crockford's Wrrrid Wide Web (private Website). Betrachtet am 
19.03.2015 unter javascript.crockford.com/javascript.html 


Crockford D. (Mai 2008). JavaScript: The Good Parts: Working with the Shallow 
Grain of JavaScript. O'Reilly 


Ecma International (Juni 2015). ECMAScript 2015 Language Specification. Stan- 
dard ECMA-262, 6th Edition / June 2015 


Ecma International (Juni 2011). ECMAScript Language Specification. Standard 
ECMA-262, 5.1 Edition / June 2011 





54.  http://en.wikipedia.org/wiki/Apa_style 
55.  https://owl.english.purdue.edu/owl/resource/560/01/ 
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Fowler M., Beck K., Brant),., Opdyke W.et.al.(1 999). Refactoring: Improving the 
Design of Existing Code, Amsterdam: Addison-Wesley Longman 


Keith, J. (2005). DOM Scripting: Web Design with JavaScript and the Document 
Object Model, 1st Edition, Friends of Ed 





Martin R. C. (2002). Agile Software Development. Principles, Patterns, and Prac- 
tices. Prentice Hall 


Martin R. C. (2008). Clean Code: A Handbook of Agile Software Craftsmanship. 
Prentice Hall 


Nicholus R. (2015). Beyond jQuery. Beta Book 2015-09-25. Lean Pub 


Opdyke W. F., Johnson R. E. (September 1990). Refactoring: An Aid in Designing 
Application Frameworks and Evolving Object-Oriented Systems. Proceedings of 
the Symposium on Object Oriented Programming Emphasizing Practical Applica- 
tions (SOOPPA). ACM 


Osmani A. (2015). Learning JavaScript Design Patterns. O'Reilly 
Rauschmayer A. (April 2016). Setting up ES6. Leanpub 


Venners B. (März 2003). Orthogonality and the DRY Principle - A Conversation 
with Andy Hunt and Dave Thomas, Part Il. Interview in einem Web-Artikel. Betrach- 
tet am 12.04.2016 unter www.artima.com/intv/dry.html 
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Lösungen der Übungsaufgaben 


Übung 1: Almost Famous Quotes 


1. document.querySelector('h1').innerHTML = 'Almost Famous 
Quotes’; 
2. document.querySelector('blockquote').innerHTML = '"<p>I have 


always wished for my computer to be as easy to use as my 
telephone; my wish has come true because I can no longer 
figure out how to use my telephone.</p><footer>- <cite>Bjarne 
Stroustrup</cite></footer>'; 


Übung 2: 010010000100111101010100 — Teil 1 


1. document.querySelector('h1') 
2. document.querySelector('#buy_form') 


3. document.querySelector('#product_img') 


Übung 3: 010010000100111101010100 — Teil 2 


1. document.querySelectorAll(i') 
document.querySelectorAll('h2') 
document.querySelectorAll(.special') 
document.querySelectorAll(li.keyword') 


document.querySelectorAll('span.special') 


x u Aw MD 


document.querySelectorAll(\i.b') 


Übung 4: Makler und Anwälte... 





onst headings = Array. from(document.querySelectorAll('h1')); 
- headings.forEach(h => h.innerHTML = 'Lorem ipsum'); 


2. © const text = Array.from(document.querySelectorAll('p')); 
% text.forEach(p => p.innerHTML = 'Lorem ipsum dolor sit amet, 
consectetuer adipiscing elit. Aenean commodo ligula eget dolor. 
Aenean massa. Cum sociis natoque penatibus et magnis dis 
parturient montes, nascetur ridiculus mus. Donec quam felis, 
ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat 
massa quis enim. Donec pede justo, fringilla vel, aliquet nec, 
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3: 


vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, 
venenatis vitae, justo. Nullam dictum felis eu pede mollis 
pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper 
nisi.'); 


El const menultems = 
Array. from(document.querySelectorAll( '#main_menu a')); 


2 menultems. forEach(a => a.innerHTML = 'Lorem'); 


Übung 5: 010010000100111101010100 — Teil 3 


1. document.querySelector(ul#product_specification Ii') 
2. document.querySelector('h1.article span‘) 

3. 
4 


. document.querySelectorAll(ul li‘) 


document.querySelectorAll(p keyword‘) 


Übung 6: 010010000100111101010100 — Teil 4 


1 


au» mw» 


$S(imglsrc$=jpg]') 
$$ (‘form input[type=button]') 
$$(*.modelldata-model*=V7]') 
( 
( 


$$('img:not([class=float_left]') 
$$ ("lisnth-child(2)') oder $$(!i:nth-type-of-child(2)') 


$$('h2 + ul‘) 


Übung 7: 010010000100111101010100 — Teil 5 


1. 


Array. from($$('p')).forEach(p => p.classList.add('gray')); 


Array. from($$("p:not(.buy_info_text)')).forEach(p => 


p.classList.add('gray')); 


Array. from($$("li:not([class])')). forEach(li 
=>li.classList.add('gray')); 
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Übung 8: Auf die Länge kommt es an??? 
 const contentLength = () => $("#content").innerHTML. length; 
2. const articleSizeCssClass = () > 
contentLength() <= 3000 && "coffe_break article" 
|| contentLength() <= 9000 && "normal_length_article" 
|| "lone_weekend_article"; 
© $("h1").classList.add(articleSizeCssClass()); 













. 
A 


Übung 9: Please Click Me 


"use Strict‘; 








{1 
const init = () => 
$("#click_me").addEventListener("click", handleButtonClick); 


const handleButtonClick = event => 
changeButtonTextTo(event.target, 
event.ctrlKey 
? "Cool, you found an easteregg!" 
: "Hey I like it when you click me!"); 


const changeButtonTextTo = (button, text) => button.innerHTML = 


const $ = document.querySelector.bind(document); 
init(); 


Codebeispiel 5.6 additional_files/05/solutions/click_me.js 


Übung 10: Newsboard: Das geht noch besser 


1. 
"use strict"; 


{ 

const init = () > { 
showMessageByNumber (currentMessageNumber) ; 
$(" [title=next]").addEventListener("click", nextMessage); 
$(" [title=prev]").addEventListener("click", prevMessage); 
$(" [title=sfirst]").addEventListener("click", firstMessage); 
$(" [title=slast]").addEventListener("click", lastMessage); 


br 


const nextMessage = e > { 
showMessageByNumber (currentMessageNumber += 1); 


e.preventDefault(); 
}; 
const prevMessage = e => { 
showMessageByNumber (currentMessageNumber -= 1); 
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e.preventDefault(); 
}; 


const firstMessage = e => { 
showMessageByNumber (currentMessageNumber 
e.preventDefault(); 


}; 


const lastMessage = e => { 
showMessageByNumber(currentMessageNumber = messages. length); 


e.preventDefault(); 
r 


const showMessageByNumber = messageNumber => 
$(",newsboard_content").innerHTML = messages [messageNumber - 


1); 


const $ = document.querySelector.bind(document); 


const messages = | 

‘<h1>Tutoren streiken!!!</h1> 

<h2>Alle Einsendeaufgaben werden ab sofort mit ® Punkten 
bewertet</h2> 
ER) <p>Überall dieselbe alte Leier. Das Layout ist fertig, der 
Text lässt auf sich warten. Damit das Layout nun nicht nackt im Raume 
steht und sich klein und leer vorkommt, springe ich ein: der 
Blindtext. Genau zu diesem Zwecke erschaffen, immer im Schatten 
meines großen Bruders »Lorem Ipsum«, freue ich mich jedes Mal, wenn 
Sie ein paar Zeilen lesen.</p> 
Aa <p class="newsboard_footer">am 25.09.2015 von K. Einer</p>', 









“<h1>Wahnsinn!</h1> 

<h2>Wie ich mit einer dämlichen Idee ein Vermögen machte</h2> 
AA, <p>Polyfon zwitschernd aßen Mäxchens Vögel Rüben, Joghurt und 
Quark. "Fix, Schwyz! " quäkt Jürgen blöd vom Paß. Victor jagt zwölf 
Boxkämpfer quer über den großen Sylter Deich. Falsches Üben von 
Xylophonmusik quält jeden größeren Zwerg. Heizölrückstoßabdämpfung. 
Zwei flinke Boxer jagen die quirlige Eva und ihren Mops durch 
Sylt.</p> 
a <p class="newsboard_footer">am 13.08.2015 von Dr. B. 
dmann</p>', 





“<h1>Prokrastination?</h1> 
8 <h2>Wie oft hörst du dich selbst sagen: „Nein, ich hab’s noch 
nicht erledigt; ich habe es vor!“</h2> 
43 <p>Denn esse est percipi - Sein ist wahrgenommen werden. Und 
weil Sie nun schon die Güte haben, mich ein paar weitere Sätze lang 
zu begleiten, möchte ich diese Gelegenheit nutzen, Ihnen nicht nur 
als Lückenfüller zu dienen, sondern auf etwas hinzuweisen, das es 
ebenso verdient wahrgenommen zu werden: Webstandards nämlich.</p> 
En <p>Sehen Sie, Webstandards sind das Regelwerk, auf dem 

bseiten aufbauen. So gibt es Regeln für HTML, CSS, JavaScript oder 
auch XML; Worte, die Sie vielleicht schon einmal von Ihrem Entwickler 
gehört haben. Diese Standards sorgen dafür, dass alle Beteiligten aus 
einer Webseite den größten Nutzen ziehen. Im Gegensatz zu früheren 
Webseiten müssen wir zum Beispiel nicht mehr zwei verschiedene 
Webseiten für den Internet Explorer und einen anderen Browser 


programmieren.</p> 
Ei <p class="newsboard_footer">am 02.06.2015 von A. Meisenbär</p>' 
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1, 
let currentMessageNumber = 1; 


init(); 





Codebeispiel 5.11 additional_fles/05/solutions/newsboard/newsboard_ la.js 
1. (refactored) 


"use strict"; 


1 







ceonst init = () >! 
showMessageByNumber (currentMessageNumber); 
$("[title=next]").addEventListener("click", nextMessage); 
$(" [title=prev]") .addEventListener("click", prevMessage); 
$(" [title=sfirst]").addEventListener("click", firstMessage); 
$(" [title=slast]").addEventListener("click", lastMessage); 


const nextMessage = e => showWMessageForEvent(e, 
rrentMessageNumber += 1); 


“u const prevMessage = e => showMessageForEvent(e, 
currentMessageNumber -= 1); 

, const firstMessage = e => showMessageForEvent(e, 
currentMessageNumber = 1); 

const lastMessage = e => showMessageForEvent(e, 
rrentMessageNumber = messages. length); 





const showMessageForEvent = (e, targetMessageNumber) => { 
showMessageByNumber(targetMessageNumber) ; 
e.preventDefault(); 


const showMessageByNumber = (messageNumber) => 
$(".newsboard_content").innerHTML = messages [messageNumber - 


const $ = document.querySelector.bind(document); 


const messages = [| 

“<h1>Tutoren streiken!!!</h1> 

<h2>Alle Einsendeaufgaben werden ab sofort mit ® Punkten 
bewertet</h2> 
30 <p>Überall dieselbe alte Leier. Das Layout ist fertig, der 
Text lässt auf sich warten. Damit das Layout nun nicht nackt im Raume 
steht und sich klein und leer vorkommt, springe ich ein: der 
Blindtext. Genau zu diesem Zwecke erschaffen, immer im Schatten 
meines großen Bruders »Lorem Ipsum«, freue ich mich jedes Mal, wenn 
Sie ein paar Zeilen lesen.</p> 


<p class="newsboard_footer">am 25.09.2015 von K, Einer</p>' 





"<h1>Wahnsinn!</h1> 

<h2>Wie ich mit einer dämlichen Idee ein Vermögen machte</h2> 
5 <p>Polyfon zwitschernd aßen Mäxchens Vögel Rüben, Joghurt und 
Quark. "Fix, Schwyz! " quäkt Jürgen blöd vom Paß. Victor jagt zwölf 
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Boxkämpfer quer über den großen Sylter Deich. Falsches Üben von 
Xylophonmusik quält jeden größeren Zwerg. Heizölrückstoßabdämpfung. 
Zwei flinke Boxer jagen die quirlige Eva und ihren Mops durch 
Sylt.</p> 
36 <p class="newsboard_footer">am 13.08.2015 von Dr. B. 
Lödmann</p>', 









“<h1>Prokrastination?</h1> 

‘| <h2>Wie oft hörst du dich selbst sagen: „Nein, ich hab’s noch 
nicht erledigt; ich habe es vor!“</h2> 

46 <p>Denn esse est percipi - Sein ist wahrgenommen werden. Und 
weil Sie nun schon die Güte haben, mich ein paar weitere Sätze lang 
zu begleiten, möchte ich diese Gelegenheit nutzen, Ihnen nicht nur 
als Lückenfüller zu dienen, sondern auf etwas hinzuweisen, das es 
ebenso verdient wahrgenommen zu werden: Webstandards nämlich.</p> 

a1 <p>Sehen Sie, Webstandards sind das Regelwerk, auf dem 
Webseiten aufbauen. So gibt es Regeln für HTML, CSS, JavaScript oder 
auch XML; Worte, die Sie vielleicht schon einmal von Ihrem Entwickler 
gehört haben. Diese Standards sorgen dafür, dass alle Beteiligten aus 
einer Webseite den größten Nutzen ziehen. Im Gegensatz zu früheren 
Webseiten müssen wir zum Beispiel nicht mehr zwei verschiedene 
Webseiten für den Internet Explorer und einen anderen Browser 
programmieren.</p> 

<p class="newsboard_footer">am 02.06.2015 von A. Meisenbär</p>' 


; 


let currentMessageNumber = 1; 





init(); 


Codebeispiel 5.12 additional _files/05/solutions/newsboard/newsboard_1b.js 


"use strict"; 


{ 
const init= ()>{ 

showNumberOfAvailableMessages(); 
showMessageByNumber (currentMessageNumber); 
$(" [title=next]").addEventListener("click", nextMessage); 
$(" [title=prevl").addEventListener("click", prevMessage); 
$(" [title=first]").addEventListener("click", firstMessage); 
$(" [title=last]").addEventListener("click", lastMessage); 





}; 


const showNumberOfAvailableMessages = () = 
$(",message_number").innerHTML = messages. length; 








“u  const nextMessage = e => showMessageForEvent(e, 
currentMessageNumber += 1); 
const prevMessage = e => showMessageForEvent(e, 

currentMessageNumber -= 1); 

| const firstMessage = e => showMessageForEvent(e, 
rrentMessageNumber = 135 

const lastMessage = e => showMessageForEvent(e, 
currentMessageNumber = messages. length); 









c 
g 
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const showMessageForEvent = (e, targetMessageNumber) => { 
ShowMessageByNumber (targetMessageNumber) ; 
e.preventDefault(); 


2 


const showMessageByNumber = (messageNumber) => 
$(".newsboard_content").innerHTML = messages [messageNumber - 


const $ = document.querySelector.bind(document); 


const messages = [| 

‘<h1>Tutoren streiken!!!</h1> 

<h2>Alle Einsendeaufgaben werden ab sofort mit ® Punkten 

ertet</h2> 
En <p>Überall dieselbe alte Leier. Das Layout ist fertig, der 
Text lässt auf sich warten. Damit das Layout nun nicht nackt im Raume 
steht und sich klein und leer vorkommt, springe ich ein: der 
Blindtext. Genau zu diesem Zwecke erschaffen, immer im Schatten 
meines großen Bruders »Lorem Ipsum«, freue ich mich jedes Mal, wenn 
Sie ein paar Zeilen lesen.</p> 
<p class="newsboard_footer">am 25.09.2015 von K. Einer</p>', 









"<hl>Wahnsinn!</h1> 
<h2>Wie ich mit einer dämlichen Idee ein Vermögen machte</h2> 
<p>Polyfon zwitschernd aßen Mäxchens Vögel Rüben, Joghurt und 
Quark. "Fix, Schwyz! " quäkt Jürgen blöd vom Paß. Victor jagt zwölf 
Boxkämpfer quer über den großen Sylter Deich. Falsches Üben von 
Xylophonmusik quält jeden größeren Zwerg. Heizölrückstoßabdämpfung. 
Zwei flinke Boxer jagen die quirlige Eva und ihren Mops durch 
Sylt.</p> 

<p class="newsboard_footer">am 13.08.2015 von Dr. B. 
mann</p>', 


“<h1>Prokrastination?</h1> 
<h2>Wie oft hörst du dich selbst sagen: „Nein, ich hab’s noch 
icht erledigt; ich habe es vor!“</h2> 

<p>Denn esse est percipi - Sein ist wahrgenommen werden. Und 
1 Sie nun schon die Güte haben, mich ein paar weitere Sätze lang 
zu begleiten, möchte ich diese Gelegenheit nutzen, Ihnen nicht nur 
als Lückenfüller zu dienen, sondern auf etwas hinzuweisen, das es 
ebenso verdient wahrgenommen zu werden: Webstandards nämlich.</p> 
[#3 <p>Sehen Sie, Webstandards sind das Regelwerk, auf dem 
Webseiten aufbauen. So gibt es Regeln für HTML, CSS, JavaScript oder 
auch XML; Worte, die Sie vielleicht schon einmal von Ihrem Entwickler 
gehört haben. Diese Standards sorgen dafür, dass alle Beteiligten aus 
einer Webseite den größten Nutzen ziehen. Im Gegensatz zu früheren 
Webseiten müssen wir zum Beispiel nicht mehr zwei verschiedene 
Webseiten für den Internet Explorer und einen anderen Browser 
programmieren.</p> 
46 <p class="newsboard_footer">am 02.06.2015 von A. Meisenbär</p>' 
l; 











let currentMessageNumber = 1; 


. init(); 
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Codebeispiel 5.13 additional_files/05/solutions/newsboard/newsboard_2.js 


const iniit= ()>1 
showNumberOfAvailableMessages(); 
showMessageByNumber (currentMessageNumber); 
$("body").addEventListener("keyup", handleKeyPress); 
$(" [title=next]").addEventListener("click", nextMessage); 
$(" [title=prev]").addEventListener("click", prevMessage); 
$("[title=first]").addEventListener("click", firstMessage); 
$(" [title=last]").addEventListener("click", lastMessage); 


Fr 


const handlekeyPress = e => { 
if (e.key === "ArrowRight") nextMessage(e); 
if (e.key === "ArrowLeft") prevMessage(e); 


H 


const showNumberOfAvailableMessages = () => 
$(" message_number").innerHTML = messages. length; 






=... const nextMessage = e => showMessageForEvent(e, 

currentMessageNumber += 1); 

BE const prevMessage = e => showMessageForEvent(e, 

currentMessageNumber -= 1); 

SU  const firstMessage = e => showMessageForEvent(e, 
currentMessageNumber = 1); 

= const lastMessage = e => showMessageForEvent(e, 

currentMessageNumber = messages. length); 


const showMessageForEvent = (e, targetMessageNumber) => { 
showMessageByNumber (targetMessageNumber); 
e.preventDefault(); 


}; 


const showMessageByNumber = messageNumber => 
$(" „newsboard_content").innerHTML = messages [messageNumber - 


const $ = document.querySelector.bind(document); 


const messages = | 

“<h1>Tutoren streiken!!!</h1> 
\ <h2>Alle Einsendeaufgaben werden ab sofort mit ® Punkten 
bewertet</h2> 
40 <p>Überall dieselbe alte Leier. Das Layout ist fertig, der 
Text lässt auf sich warten. Damit das Layout nun nicht nackt im Raume 
steht und sich klein und leer vorkommt, springe ich ein: der 
Blindtext. Genau zu diesem Zwecke erschaffen, immer im Schatten 
meines großen Bruders »Lorem Ipsum«, freue ich mich jedes Mal, wenn 
Sie ein paar Zeilen lesen.</p> 
A <p class="newsboard_footer">am 25.09.2015 von K. Einer</p>', 





“<h1>Wahnsinn!</h1> 
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<h2>Wie ich mit einer dämlichen Idee ein Vermögen machte</h2> 
<p>Polyfon zwitschernd aßen Mäxchens Vögel Rüben, Joghurt und 
Quark. "Fix, Schwyz! " quäkt Jürgen blöd vom Paß. Victor jagt zwölf 
Boxkämpfer quer über den großen Sylter Deich. Falsches Üben von 
Xylophonmusik quält jeden größeren Zwerg. Heizölrückstoßabdämpfung. 
Zwei flinke Boxer jagen die quirlige Eva und ihren Mops durch 
Sylt.</p> 

146 <p class="newsboard_footer">am 13.08.2015 von Dr. B. 
Lödmann</p>', 









"<h1>Prokrastination?</h1> 

9 <h2>Wie oft hörst du dich selbst sagen: „Nein, ich hab’s noch 
nicht erledigt; ich habe es vor!“</h2> 

En <p>Denn esse est percipi - Sein ist wahrgenommen werden. Und 
weil Sie nun schon die Güte haben, mich ein paar weitere Sätze lang 

zu begleiten, möchte ich diese Gelegenheit nutzen, Ihnen nicht nur 
als Lückenfüller zu dienen, sondern auf etwas hinzuweisen, das es 
ebenso verdient wahrgenommen zu werden: Webstandards nämlich.</p> 

EI <p>Sehen Sie, Webstandards sind das Regelwerk, auf dem 
Webseiten aufbauen. So gibt es Regeln für HTML, CSS, JavaScript oder 
auch XML; Worte, die Sie vielleicht schon einmal von Ihrem Entwickler 
gehört haben. Diese Standards sorgen dafür, dass alle Beteiligten aus 
einer Webseite den größten Nutzen ziehen. Im Gegensatz zu früheren 
Webseiten müssen wir zum Beispiel nicht mehr zwei verschiedene 
Webseiten für den Internet Explorer und einen anderen Browser 
grammieren.</p> 

<p class="newsboard_footer">am 02.06.2015 von A. Meisenbär</p>' 
I 










let currentMessageNumber = 1; 


init(); 





Codebeispiel 5.14 additional_hles/05/solutions/newsboard/newsboard_3.js 


4. 


"use strict"; 


{ 





const init = () > { 
showNumberOfAvailableMessages(); 
ShowMessageByNumber (currentMessageNumber) ; 
$("body").addEventListener("keyup", handleKeyPress); 
$("[title=next]").addEventListener("click", nextMessage); 
$(" [title=prev]").addEventListener("click", prevMessage); 
$("[title=sfirst]").addEventListener("click", firstMessage); 
$("[title=last]").addEventListener("click", lastMessage); 
+}; 


const handleKeyPress = e => { 

if (e.ctrlkey) return handleKeyCodenithCtri(e); 
handleKeyCodeWithoutSpecialkKeys(e); 

1} 


const handleKeyCodeWithoutSpecialKeys = e => { 
if (e.key === "ArrowRight") nextMessage(e); 





200 14 Anhang B: Quellen & Literaturhinweise 





if (e.key === "ArrowLeft") prevMessage(e); 
}; 
const handleKeyCodewithltrl = e => { 

if (e.key === "ArrowRight") firstMessage(e); 

if (e.key === "ArrowLeft") lastMessagele); 
3; 


const showNumberOfAvailableMessages = () => 
$(" „message_number").innerHTML = messages.length; 





const nextMessage = e => showMessageForEvent(e, 

currentMessageNumber += 1); 

EEI const prevMessage = e => showMessageForEvent(e, 

currentMessageNumber -= 1); 

©  const firstMessage = e => showMessageForEvent(e, 
currentMessageNumber = 1); 

EU const lastMessage = e => showMessageForEvent(e, 

currentMessageNumber = messages.length); 


3 






const showMessageForEvent = (e, targetMessageNumber) => { 
showMessageByNumber (targetMessageNumber); 
e.preventDefault(); 

} 


const showMessageByNumber = (messageNumber) => 
$(" „newsboard_content").innerHTML = messages [messageNumber - 


const $ = document.querySelector.bind(document); 


const messages = [| 

“<h1>Tutoren streiken!!!</h1> 
149 <h2>Alle Einsendeaufgaben werden ab sofort mit ® Punkten 
bewertet</h2> 
Eu <p>Überall dieselbe alte Leier. Das Layout ist fertig, der 
Text lässt auf sich warten. Damit das Layout nun nicht nackt im Raume 
steht und sich klein und leer vorkommt, springe ich ein: der 
Blindtext. Genau zu diesem Zwecke erschaffen, immer im Schatten 
meines großen Bruders »Lorem Ipsum«, freue ich mich jedes Mal, wenn 
Sie ein paar Zeilen lesen.</p> 
! <p class="newsboard_footer">am 25.09.2015 von K. Einer</p>', 








“<h1>Wahnsinn!</h1> 

<h2>wWie ich mit einer dämlichen Idee ein Vermögen machte</h2> 
<p>Polyfon zwitschernd aßen Mäxchens Vögel Rüben, Joghurt und 
Quark. "Fix, Schwyz! " quäkt Jürgen blöd vom Paß. Victor jagt zwölf 
Boxkämpfer quer über den großen Sylter Deich. Falsches Üben von 
Xylophonmusik quält jeden größeren Zwerg. Heizölrückstoßabdämpfung. 
Zwei flinke Boxer jagen die quirlige Eva und ihren Mops durch 
Sylt.</p> 


156 <p class="newsboard_footer">am 13.08.2015 von Dr. B. 
Lödmann</p>" , 








“<h1>Prokrastination?</h1> 

<h2>Wie oft hörst du dich selbst sagen: „Nein, ich hab’s noch 
nicht erledigt; ich habe es vor!“</h2> 

<p>Denn esse est percipi - Sein ist wahrgenommen werden. Und 

weil Sie nun schon die Güte haben, mich ein paar weitere Sätze lang 
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zu begleiten, möchte ich diese Gelegenheit nutzen, Ihnen nicht nur 
als Lückenfüller zu dienen, sondern auf etwas hinzuweisen, das es 
ebenso verdient wahrgenommen zu werden: Webstandards nämlich.</p> 

61 <p>Sehen Sie, Webstandards sind das Regelwerk, auf dem 
Webseiten aufbauen. So gibt es Regeln für HIML, CSS, JavaScript oder 
auch XML; Worte, die Sie vielleicht schon einmal von Ihrem Entwickler 
gehört haben. Diese Standards sorgen dafür, dass alle Beteiligten aus 
einer Webseite den größten Nutzen ziehen. Im Gegensatz zu früheren 
Webseiten müssen wir zum Beispiel nicht mehr zwei verschiedene 
Webseiten für den Internet Explorer und einen anderen Browser 
programmieren.</p> 

\ <p class="newsboard_footer">am 02.06.2015 von A. Meisenbär</p>' 






let currentMessageNumber = 1; 


f dnitl); 
ı 


Codebeispiel 5.15 additional_files/05/solutions/newsboard/newsboard_4.js 





Übung 12: Jetzt hat es sich »ausgebuyt«! 


'use strict"; 






const init = () => 
$("#buy").addEventListener("click", disableBuyButton); 


const disableBuyButton = e => e.target.disabled = true; 


| mitt), 
} 
Codebeispiel 7.5 additional_files/07/solutions/buy_button/buy_button.js 


Übung 13: Newsboard: Jetzt ist aber Schluss! 


Al"use strict"; 


A 
const init = () >{ 
initProgressbar(); 
firstMessage(); 
$(" [title=next]").addEventListener("click", nextMessage); 
$("[title=prev]").addEventListener("click", prevMessage); 
$(" [title=sfirst]").addEventListener("click", firstMessage); 
$(" [title=slast]").addEventListener("click", lastMessage); 
+} 





const initProgressbar = () = { 
progressbar().max = messages.length; 
progressbar().value = 1; 


const nextMessage = () => { 
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incCurrentMessageNumber(); 
update(); 
}; 
const prevMessage = () > { 
decCurrentMessageNumber(); 
update(); 
}; 
const firstMessage = () > 1 
setCurrentMessageNumberToFirstMessage(); 
update(); 
}; 
const lastMessage = () > { 
setCurrentMessageNumberToLastMessage(); 
update(); 
}; 


const incCurrentMessageNumber = () => progressbar().value += 1; 
const decCurrentMessageNumber = () => progressbar().value -= 1; 
7 const setCurrentMessageNumberToFirstMessage = () => 
rogressbar().value = 1; 

const setCurrentMessageNumberToLastMessage = () => 
progressbar().value = progressbar().max; 













const update = () > { 
updateMessage(); 

updateButtonsState(); 
h 


const updateMessage = () => 
showMessageByNumber (currentMessageNumber()); 


const updateButtonsState = () => { 
buttonNext().disabled = lastMessageReached(); 
buttonPrev().disabled = firstMessageReached(); 
buttonLast().disabled = lastMessageReached(); 
buttonFirst().disabled = firstMessageReached(); 


}; 


const lastMessageReached = () => currentMessageNumber() === 
messages. length; 
| const firstMessageReached = () => currentMessageNumber() === 1; 








const showMessageByNumber = messageNumber => 
$(" .newsboard_content").innerHTML = messages [messageNumber - 


const buttonNext = () => $("[title=next]"); 
const buttonPrev = () => $("[title=prevl"); 
const buttonfirst = () => $("[title=first]"); 
const buttonLast = () => $("[title=last]"); 


const currentMessageNumber = () = progressbar().value; 
const progressbar = () => $("#messages_progress"); 


init(); 


Codebeispiel 7.6 additional_files/07/solutions/newsboard/newsboard.js 
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Übung 14: Die Rückkehr der Lauflichter: Teil 1 - Chasing 
Lights 


‘use strict"; 


const init = () => lights().on("mouseenter", e => { 
turnAlloOff(); 

turnOnNext (e.target); 

r); 


const turnOnNext = light => turnOn(lights() [nextLightNr(light)]); 
const nextLightNr = light => isLast(light) ? ® : lightNr(light) 


const isLast = light => lightNr(light) === lights().length - 1; 
const lightNr = light => lights().index0f(light); 

const turnOn = light => light.src = "light_on.png"; 

const turnOff = light => light.src = "light_off.png"; 

const turnAllOff = () => lights().forEach(turnOff); 

const Lights = () => $$("imglalt=lightbulb]"); 


init(); 





Codebeispiel 7.8 additional_files/07/solutions/running_light/running_light.js 


Übung 15: Die Rückkehr der Lauflichter: Teil 2 - Triggered 
Classic 


use strict"; 


const IMAGE_FILE_ON = "light_on.png"; 
const IMAGE_FILE_OFF = "light_off.png"; 


const init = () => document.on("click", () => { 
const currentLightNr = findFirstTurnedOnLightNr(); 
turnOffByNr(currentLightNr); 

turnOnByNr (nextLightNr(currentLightNr)); 

}; 


const findFirstTurnedOnLightNr = () => lights(). findIndex(isOn); 
const isOn = light => light.src.endsWith(IMAGE_ FILE ON); 

const nextLightNr = nr => isLast(nr) ?@® : nr +1; 

const isLast = nr => nr === lights().length - 1; 

const turnOnByNr = nr => turnOn(lights()I[nr]); 

const turnOffByNr = nr => turnOff(lights() [nr]); 

const turnOn = light => light.src = IMAGE_FILE_ON; 

const turnOff = light => light.src = IMAGE_FILE_OFF; 

const lights = () => $$("imglalt=lightbulb]"); 


init(); 





Codebeispiel 7.9 additional_files/07/solutions/running_light/running_light2.js 
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Übung 16: 010010000100111101010100 — Teil 6 


$$('p').forEach(p => p.style.color = "plue”); 


Übung 17: TABula Rasa 


"use strict"; 


{ 






const init = ()»>1 
registerTabEvents(); 
activateTabByIndex(®); 
H 


const registerTabEvents = () = 
navItems().forEach((elem, i) => 
elem.on("click", () => activateTabByIndex(i))); 


const activateTabByIndex = index => { 
removeHighlightFromActiveNavIten(); 
hightlightNavItemByIndex(index); 
hideAllArticles(); 
showArticleByIndex(index); 

}; 

const removeHighlightFromActiveNavItem = ÜNe> 
activeNavItems().forEach(elem => 

elem.classList. remove("active")); 


const hightlightNavItemByIndex = index => 
navItems()[index].classList.add("active"); 


const hideAllArticles = () => articles().forEach(hide); 
const showArticleByIndex = index => show(articles()l[index]); 
const articles = () => $$(".tabs article"); 

const navItems = () => $$(".tabs > nav li"); 


const activeNavItems = () => $$(".tabs > nav li.active"); 


"block"; 
"none"; 


elem => elem.style.display 
elem => elem.style.display 


const show 
const hide 


init(); 


Codebeispiel 8.12 additional_files/08/solutions/tabbed_navigation/tabs.js 
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Übung 18: Farbe Wechsel Dich 


._ <!DOCTYPE html> 
<html lang="en"> 


<head> 
<meta charset="UTF-8" /> 
<title>Document</title> 
<script src="../../../lib/dom_helper.js" defer="defer"></script> 
<script src="color_change.js" defer="defer"></script> 
</head> 


<body> 
<button>Red</button> 
<button>Green</button> 
<button>Blue</button> 





Codebeispiel 8.13 additional_fles/08/solutions/color_changeT/color_change.html 
"use strict"; 


21 $$ ("button") .on("click", e => $("body").style.backgroundColor = 
e.target.innerHTML); 


Codebeispiel 8.14 additional_files/08/solutions/color_change 1/color_change.js 


Übung 19: Farbe Wechsel Dich — Teil 2 


<!DOCTYPE html> 
html lang="en"> 













head> 

<meta charset="UTF-8" /> 

<title>Document</title> 

<script src="../../../lib/dom_helper.js" defer="defer"></script> 
sscript src="color_change.js" defer="defer"></script> 

. </head> 


Red <input type="range" max="255" id="red"/> 
Green <input type="range" max="255" id="green" /> 
Blue <input type="range" max="255" id="blue" /> 


 </html> 


Codebeispiel 8.15 additional_ hles/08/solutions/color_change2/color_change.html 


KM Nuse strict"; 






const r 


() => $("#red").value; 
constg= () 


=> $("#green"),.value; 





14 Anhang B: Quellen & Literaturhinweise 





onst b = () => $("#blue").value; 





$$("input [type='range']").on("input”, () => 


x 


$("body").style.backgroundColor = 'rgb(${r()}, ${gl)}, HUHN); 





Codebeispiel 8.16 additional_files/08/solutions/color_change2/color_change.js 


Übung 20: awesome tours 






"use strict"; 


 const showInfo = e => $("#info”).innerHTML = ' 
_...<h3> 
3 <img sre="${country(e)}.png" alt="${flagName(e)}'" 
itle="${flagName(e)}" /> 
& ${name(e)} 
</h3> 
<p>${desc(e)}</p>'; 








. const name = e = e.target.alt; 

‘  const desc = e => e.target.dataset.description; 
onst country = e => e.target.dataset.countryCode; 
"= const flagName = e => e.target.dataset. flagName; 





"2 $$(" img [data-description]").on("mouseenter", showInfo); 


Codebeispiel 9.1 additional_files/09/solutions/awesome_tours/awesome_tours.js 


Übung 21: 010010000100111101010100 — Teil 7 


1. . const li = document.createElement("1i"); 
 li.textContent = "Capacity: 11 0z."; 
& $("#product_specification").appendChild(li); 


2.  const option = document.createElement("option"); 


option. textContent = #5- Items; 
=, $("#buy_form select").appendChild(option); 


Übung 22: 010010000100111101010100 — Teil 8 
1. $("h2").remove() 


2. $("h1 .keyword").remove() 


Übung 23: 010010000100111101010100 — Teil 9 


° const li = document.createElement("li"); 
i.textContent = "Capacity: 11 0z."; 

© $("#product_specification").insertBefore(li, 
$$("#product_specification 1i")[4]) 








14.2 Quellen 207 





Übung 24: Cutycat 


use strict"; 
const NUMBER_OF_WINNERS = 3; 


const mayAddCutie = cutie => 


| $$("#cutest li"). length < NUMBER_OF_WINNERS 
ı && !isInCutest(cutie); 


const isInCutest = cutie => 
$$("#cutest li span") 
.filter(span => span.textContent === cutie.textContent) 
„length > ®; 


$$("#candidates li").on("click", e => f 
const cutie = e.currentTarget; 
if (!mayAddCutie(cutie)) return; 


> $("#cutest").appendChild( 
3 cutie.cloneNode(true).on("click", e => 
e.currentTarget.remove()) 
); 
na 


Codebeispiel 12.7 additional_fhles/ 12/solutions/cude_kittens/cutycat.js 














Index 


A 


add 44.48 125 134 151 185 

Ajax 167 

alt 72 86 87 105 182 

API 11 1242 173 174 175 179 180 181 





appendchild 133 136 137 143 144 145 


async 53 91 


Bibliothek 13 14 40 96 
Block-Scope 55 
blur 84 186 


C 


change 84 85 186 187 
checked 105 182 
childElementCount 166 180 
children 166 173 180 
cloneNode 143 144 145 181 
cols 105 182 

contains 44 47 49 185 
Content 50 100 102 103 104 








D 


Data 41 129 130 192 

dbiclick 84 187 

defer 53 54 91 

disabled 101 102 103 105 161 182 
Document Object Model 11 25 190 
DOM-Scripting 12 

DOM-Traversal 149 151 166 167 181 
DOMTokenList 43 44 45 186 


E 


each 13 

ECMA 189 

EcmaScript 13 15 189 

Eltern-Element 32 155 

Eventhandler 64 65 68 71 72 87 
Events 63 64 65 72 84 113 123 162 186 


E 


filter 47 60 
firstElementChild 166 180 
focus 84 187 

Framework 9 12 14 40 
Function-Scope 55 


G 


getComputedStyle 113 116.117 118 
Guard Clauses 67 
Guard 67 














H 


hashchange 84 187 
high 13 15 60 
href 78 105 182 








IDL 100 102 103 104 
IIFE 55 

init 69 70 92 101 118 141 
Initialisierung 69 78 
item 49 185 


J 


jQuery 13 14.81 190 


K 


key 71 87 129 

KeyboardEvent 71 87 

keydown 85 187 

keypress 85 187 

keyup 64 65 71 72 85 187 

keyword 34 38 120 123 129 191 192 


L 








max 98 99 105 183 

maxlength 105 183 

min 105 183 

mouseenter 85 121 123 132 187 
mouseleave 85 122 187 
mousemove 85 86 123 187 
multiple 105 183 


N 





Newspaper-Metapher 59 60 70 
nextElementSibling 156 164 166 180 
Nodelist 32 43 47 60 61 82 


O 








lastElementChild 166 180 


M 





map 13 15 60 129 


on 81 82 83 90 123 162 190 


P 


Perfomance 118 

placeholder 106 183 

Polyfill 151 

preventDefault 74 79 

previousElementSibling 155 156 161 
166 180 


R 


Read-Only 118 166 180 
readonly 106 183 

rel 106 183 
removeChild 151 
required 106 183 

reset 85 187 

resize 85 188 





rows 106 184 


5 





scroll 85 188 

select 

selected 106 184 
selector 27 28 39 175 179 
Selektion 42 174 175 
siblings 154 155 

size 106 111 184 
Source-Order 53 

start 106 184 

step 106 184 

strict 54 

Style-Objekt 110 114 115 116 117 119 


submit 85 188 


7 


tabindex 107 184 





target 72 87 148 155 171 

timestamp 72 87 

title 78 107 119 184 

toggle 44 46 49 185 

transitionend 86 188 

Traversal 149 151 166 167 180 181 

type 27 71 105 106 107 128175 183 
192 


V 





value 65 98 99 100 101 103 107 184 
VanillaJS 
visibilitychange 86 188 


W 





wheel 86 188 
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